import { Card, CardBody } from '@/components/ui/Card';
import { WinProbBar } from '@/components/WinProbBar';
import { fmt, useFormat } from '@/lib/i18n';
import type { Fixture, MatchPrediction } from '@/lib/types';

export interface PredictionDay {
  key: string;
  firstKickoff: string;
  items: { f: Fixture; m: MatchPrediction }[];
}

/** Day-grouped prediction cards: a localized day header, then one card per match. */
export function PredictionList({ days }: { days: PredictionDay[] }) {
  const { t, kickoffDay, kickoffTime } = useFormat();
  return (
    <div className="space-y-5">
      {days.map((d) => (
        <section key={d.key}>
          <h3 className="smallcaps mb-2">{kickoffDay(d.firstKickoff)}</h3>
          <div className="grid gap-3 sm:grid-cols-2">
            {d.items.map(({ m, f }) => (
              <Card key={m.num}>
                <CardBody className="space-y-2">
                  <div className="flex items-center justify-between text-[11px] text-faint">
                    <span>{f.group ? fmt(t.common.group, { group: f.group }) : t.stage[f.stage]}</span>
                    <span>{kickoffTime(f.kickoff)}</span>
                  </div>
                  <WinProbBar home={m.home} away={m.away} probs={m.probs} topScore={m.topScore} />
                </CardBody>
              </Card>
            ))}
          </div>
        </section>
      ))}
    </div>
  );
}
