import { Flame, Snowflake } from "lucide-react";
import { hotNumbers, coldNumbers } from "@/lib/loto-data";
import { LotoBall } from "./LotoBall";

export function NumberFrequency() {
  return (
    <div className="rounded-2xl border border-border bg-card p-6 shadow-[var(--shadow-card)]">
      <h3 className="font-display text-lg font-bold">Fréquence des numéros</h3>
      <p className="text-sm text-muted-foreground">Statistiques sur les 90 derniers tirages</p>

      <div className="mt-5 space-y-5">
        <div>
          <div className="mb-3 flex items-center gap-2 text-primary">
            <Flame className="h-4 w-4" />
            <span className="text-sm font-semibold">Numéros chauds</span>
          </div>
          <div className="space-y-2">
            {hotNumbers.map((item, i) => (
              <div key={item.num} className="flex items-center gap-3">
                <LotoBall value={item.num} variant="hot" size="sm" index={i} />
                <div className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
                  <div className="h-full gradient-orange" style={{ width: `${(item.freq / 40) * 100}%` }} />
                </div>
                <span className="w-8 text-right text-xs font-medium tabular-nums text-muted-foreground">{item.freq}x</span>
              </div>
            ))}
          </div>
        </div>

        <div>
          <div className="mb-3 flex items-center gap-2 text-secondary">
            <Snowflake className="h-4 w-4" />
            <span className="text-sm font-semibold">Numéros froids</span>
          </div>
          <div className="space-y-2">
            {coldNumbers.map((item, i) => (
              <div key={item.num} className="flex items-center gap-3">
                <LotoBall value={item.num} variant="cold" size="sm" index={i} />
                <div className="h-2 flex-1 overflow-hidden rounded-full bg-muted">
                  <div className="h-full gradient-green" style={{ width: `${(item.freq / 40) * 100}%` }} />
                </div>
                <span className="w-8 text-right text-xs font-medium tabular-nums text-muted-foreground">{item.freq}x</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}