Pixel Bot

"use client";

import { useEffect, useState } from "react";
import type { AnimatedFrame } from "./pixel-patterns";

type PixelGridProps = {
  frames: readonly AnimatedFrame[];
  activeClassName?: string;
  inactiveClassName?: string;
  cellSizeClassName?: string;
};

export function PixelGrid({
  frames,
  activeClassName = "bg-zinc-900 dark:bg-zinc-100",
  inactiveClassName = "bg-zinc-200 dark:bg-zinc-800",
  cellSizeClassName = "size-4",
}: PixelGridProps) {
  const [frameIndex, setFrameIndex] = useState(0);

  // New frames start from the first one (adjusted during render, not in an effect).
  const [prevFrames, setPrevFrames] = useState(frames);
  if (frames !== prevFrames) {
    setPrevFrames(frames);
    setFrameIndex(0);
  }

  useEffect(() => {
    if (frames.length <= 1) return;

    let index = 0;
    let timeoutId: ReturnType<typeof setTimeout>;

    const tick = () => {
      index = (index + 1) % frames.length;
      setFrameIndex(index);
      timeoutId = setTimeout(tick, frames[index].duration);
    };

    timeoutId = setTimeout(tick, frames[0].duration);

    return () => clearTimeout(timeoutId);
  }, [frames]);

  const pattern = frames[frameIndex]?.frame ?? frames[0].frame;
  const size = pattern.length;

  return (
    <div
      className="grid gap-1"
      style={{ gridTemplateColumns: `repeat(${size}, minmax(0, 1fr))` }}
    >
      {pattern.map((row, rowIndex) =>
        row.split("").map((cell, colIndex) => (
          <div
            key={`${rowIndex}-${colIndex}`}
            className={`${cellSizeClassName} rounded-sm ${
              cell === "1" ? activeClassName : inactiveClassName
            }`}
          />
        ))
      )}
    </div>
  );
}