import { type Puzzle } from '@/lib/puzzles';

import AppLink from './AppLink';

export default function CardTable({ puzzles }: { puzzles: Puzzle[] }) {
  return (
    <div className="relative h-96 w-full overflow-scroll">
      <table className="min-w-full table-auto rounded-lg border-2 border-highlight-primary bg-primary-700 text-left text-sm text-muted shadow-md">
        <thead className="z-1 sticky -top-1 bg-primary-600 text-xs uppercase text-white ">
          <tr>
            <th className="px-6 py-3">Exercice</th>
            <th className="px-6 py-3">Tentative</th>
            <th className="px-6 py-3">Score</th>
            <th className="px-6 py-3">Dernier essai</th>
            <th className="px-6 py-3">
              <span className="sr-only">Reprendre</span>
            </th>
          </tr>
        </thead>
        <tbody className="overflow-y-scroll">
          {puzzles.length &&
            puzzles.map((puzzle) => (
              <tr key={puzzle.id} className="bg-primary-700 hover:bg-primary-800 ">
                <th scope="row" className="whitespace-nowrap px-6 py-4 font-medium text-white">
                  {puzzle.name}
                </th>
                <td className="px-6 py-4">30</td>
                <td className="px-6 py-4">300</td>
                <td className="px-6 py-4">10/10/2010</td>
                <td className="px-6 py-4 text-right">
                  <AppLink
                    href={`dashboard/puzzles/${puzzle.id}`}
                    className="font-medium text-brand hover:underline"
                  >
                    Reprendre
                  </AppLink>
                </td>
              </tr>
            ))}
        </tbody>
      </table>
    </div>
  );
}