imprimersudoku/app/components/SudokuGrid.tsx

"use client";

import { Grid } from "../lib/sudoku";

interface SudokuGridProps {
  grid: Grid;
  index: number;
  isSolution?: boolean;
}

export default function SudokuGrid({ grid, index, isSolution = false }: SudokuGridProps) {
  return (
    <figure className="sudoku-container" aria-label={`Grille de sudoku numéro ${index + 1}${isSolution ? " (solution)" : ""}`}>
      <figcaption className="sudoku-number">N°{index + 1}</figcaption>
      <table className="sudoku-table" role="grid" aria-label={`Sudoku ${index + 1}`}>
        <tbody>
          {grid.map((row, r) => (
            <tr key={r}>
              {row.map((cell, c) => {
                const borderClasses = [
                  "sudoku-cell",
                  c % 3 === 0 ? "border-l-thick" : "",
                  c === 8 ? "border-r-thick" : "",
                  r % 3 === 0 ? "border-t-thick" : "",
                  r === 8 ? "border-b-thick" : "",
                ].filter(Boolean).join(" ");

                return (
                  <td key={c} className={borderClasses}>
                    {cell !== 0 ? (
                      <span className={isSolution && cell ? "solution-digit" : "given-digit"}>
                        {cell}
                      </span>
                    ) : null}
                  </td>
                );
              })}
            </tr>
          ))}
        </tbody>
      </table>
    </figure>
  );
}