"use client";

import { useState, useEffect } from "react";
import { generateTango, TangoPuzzle } from "@/lib/generators/tango";
import { todayISO } from "@/lib/rng";
import TangoBoard from "@/components/TangoBoard";
import DailyPageShell from "@/components/DailyPageShell";

export default function TangoPage() {
  const date = todayISO();
  const [puzzle, setPuzzle] = useState<TangoPuzzle | null>(null);
  useEffect(() => { setPuzzle(generateTango(date)); }, [date]);

  const dateLabel = new Date(date + "T00:00:00").toLocaleDateString("fr-FR", {
    weekday: "long", day: "numeric", month: "long",
  });

  return (
    <DailyPageShell game="tango" date={date} dateLabel={dateLabel}>
      {puzzle ? (
        <TangoBoard puzzle={puzzle} date={date} />
      ) : (
        <div className="py-20 text-gray-300 text-sm">Chargement…</div>
      )}
    </DailyPageShell>
  );
}