import { Sparkles } from "lucide-react";
import { formatFCFA } from "@/lib/loto-data";
import { LotoBall } from "./LotoBall";

export function LatestDraw({ dbDraw }: { dbDraw?: any }) {
  if (!dbDraw) return null;

  const dateStr = dbDraw.draw_date ? new Date(dbDraw.draw_date).toLocaleDateString('fr-FR', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) : '';
  const winningNumbers = dbDraw.winning_numbers || [];
  const machineNumbers = dbDraw.machine_numbers || [];

  return (
    <div className="relative overflow-hidden rounded-2xl border border-border bg-[image:var(--gradient-surface)] p-6 shadow-[var(--shadow-card)]">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <div className="flex items-center gap-2 text-primary">
            <Sparkles className="h-4 w-4" />
            <span className="text-xs font-semibold uppercase tracking-wider">Dernier tirage</span>
          </div>
          <h2 className="mt-1 font-display text-2xl font-bold">{dbDraw.name}</h2>
          <p className="text-sm text-muted-foreground">{dateStr}</p>
        </div>
      </div>

      <div className="mt-6">
        <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Numéros gagnants</p>
        <div className="flex flex-wrap gap-2.5">
          {winningNumbers.map((n: number, i: number) => (
            <LotoBall key={n} value={n} variant="draw" size="lg" index={i} />
          ))}
        </div>
      </div>

      <div className="mt-5">
        <p className="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Numéros machine</p>
        <div className="flex flex-wrap gap-2.5">
          {machineNumbers.map((n: number, i: number) => (
            <LotoBall key={n} value={n} variant="machine" size="md" index={i + 5} />
          ))}
        </div>
      </div>
    </div>
  );
}