"use client";
import {
  AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid,
} from "recharts";

const DOW = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

export default function ScanTrendChart({ data }: { data: { date: string; scans: number }[] }) {
  const chart = data.map((d) => ({
    label: DOW[new Date(d.date).getDay()],
    scans: d.scans,
  }));
  return (
    <ResponsiveContainer width="100%" height={230}>
      <AreaChart data={chart} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
        <defs>
          <linearGradient id="scanFill" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#3b82f6" stopOpacity={0.35} />
            <stop offset="100%" stopColor="#3b82f6" stopOpacity={0} />
          </linearGradient>
        </defs>
        <CartesianGrid strokeDasharray="3 3" stroke="#eef2f7" vertical={false} />
        <XAxis dataKey="label" tickLine={false} axisLine={false}
               tick={{ fontSize: 12, fill: "#94a3b8" }} />
        <YAxis tickLine={false} axisLine={false} tick={{ fontSize: 12, fill: "#94a3b8" }} />
        <Tooltip />
        <Area type="monotone" dataKey="scans" stroke="#2563eb" strokeWidth={2.5}
              fill="url(#scanFill)" dot={{ r: 3, fill: "#2563eb" }} />
      </AreaChart>
    </ResponsiveContainer>
  );
}