/* Lovingo — scrabble-style puzzle grid */

function PuzzleGrid({ puzzle, reveal, variant = "app", cell = 46, gap = 6 }) {
  if (!puzzle || !puzzle.cells.length) return null;
  const { rows, cols, cells } = puzzle;

  const width = cols * cell + (cols - 1) * gap;
  const height = rows * cell + (rows - 1) * gap;

  return (
    <div
      className={"pgrid " + (variant === "paper" ? "pgrid-paper" : "pgrid-app")}
      style={{ position: "relative", width, height }}
    >
      {cells.map((c, i) => {
        const x = c.c * (cell + gap);
        const y = c.r * (cell + gap);
        const cls = "tile" + (c.type === "space" ? " tile-space" : "");
        return (
          <div
            key={i}
            className={cls}
            style={{
              position: "absolute",
              left: x, top: y,
              width: cell, height: cell,
              fontSize: Math.round(cell * 0.48),
              animationDelay: (i * 14) + "ms",
            }}
          >
            {c.type !== "space" && reveal && <span className="tile-letter">{c.ch}</span>}
          </div>
        );
      })}
    </div>
  );
}

window.PuzzleGrid = PuzzleGrid;