import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis, CartesianGrid } from "recharts";
import { salesData } from "@/lib/loto-data";

export function SalesChart() {
  return (
    <div className="rounded-2xl border border-border bg-card p-6 shadow-[var(--shadow-card)]">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <div>
          <h3 className="font-display text-lg font-bold">Ventes & gains</h3>
          <p className="text-sm text-muted-foreground">7 derniers jours (millions FCFA)</p>
        </div>
        <div className="flex gap-4 text-xs">
          <span className="flex items-center gap-1.5"><span className="h-2.5 w-2.5 rounded-full bg-primary" />Ventes</span>
          <span className="flex items-center gap-1.5"><span className="h-2.5 w-2.5 rounded-full bg-secondary" />Gains</span>
        </div>
      </div>

      <div className="mt-5 h-64 w-full">
        <ResponsiveContainer width="100%" height="100%">
          <AreaChart data={salesData} margin={{ top: 10, right: 8, left: -16, bottom: 0 }}>
            <defs>
              <linearGradient id="gVentes" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="oklch(0.72 0.18 55)" stopOpacity={0.5} />
                <stop offset="100%" stopColor="oklch(0.72 0.18 55)" stopOpacity={0} />
              </linearGradient>
              <linearGradient id="gGains" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="oklch(0.62 0.14 155)" stopOpacity={0.5} />
                <stop offset="100%" stopColor="oklch(0.62 0.14 155)" stopOpacity={0} />
              </linearGradient>
            </defs>
            <CartesianGrid strokeDasharray="3 3" stroke="oklch(0.32 0.025 165)" vertical={false} />
            <XAxis dataKey="day" stroke="oklch(0.72 0.02 150)" fontSize={12} tickLine={false} axisLine={false} />
            <YAxis stroke="oklch(0.72 0.02 150)" fontSize={12} tickLine={false} axisLine={false} />
            <Tooltip
              contentStyle={{
                background: "oklch(0.21 0.025 165)",
                border: "1px solid oklch(0.32 0.025 165)",
                borderRadius: "0.75rem",
                color: "oklch(0.97 0.01 120)",
              }}
            />
            <Area type="monotone" dataKey="ventes" stroke="oklch(0.72 0.18 55)" strokeWidth={2.5} fill="url(#gVentes)" />
            <Area type="monotone" dataKey="gains" stroke="oklch(0.62 0.14 155)" strokeWidth={2.5} fill="url(#gGains)" />
          </AreaChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}