import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
} from "recharts";

const data = [
  { name: "هفته اول", a: 200000, b: 250000 },
  { name: "هفته دوم", a: 450000, b: 380000 },
  { name: "هفته سوم", a: 350000, b: 600000 },
  { name: "هفته چهارم", a: 150000, b: 500000 },
  { name: "هفته پنجم", a: 500000, b: 700000 },
  { name: "هفته ششم", a: 600000, b: 800000 },
  { name: "هفته هفتم", a: 700000, b: 900000 },
  { name: "هفته هشتم", a: 800000, b: 950000 },
  { name: "هفته نهم", a: 900000, b: 1000000 },
];

export default function VisitorsChart() {
  return (
    <div dir="ltr" className="w-full h-72 rounded-xl bg-white shadow-sm p-6">
      <p className="text-sm font-medium mb-3 text-right">آمار بازدید کننده‌ها</p>

      <ResponsiveContainer width="100%" height="90%">
        <LineChart data={data}>
          {/* گرادیانت‌ها */}
          <defs>
            <linearGradient id="gradA" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#C2574E" stopOpacity={0.4} />
              <stop offset="100%" stopColor="#C2574E" stopOpacity={0} />
            </linearGradient>

            <linearGradient id="gradB" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#6B432B" stopOpacity={0.4} />
              <stop offset="100%" stopColor="#6B432B" stopOpacity={0} />
            </linearGradient>
          </defs>

          <XAxis dataKey="name" tick={{ fontSize: 12 }} />
          <YAxis tick={{ fontSize: 12 }} />
          <Tooltip />
          <Line
            type="monotone"
            dataKey="a"
            stroke="#C2574E"
            strokeWidth={3}
            fill="url(#gradA)"
            dot={false}
          />
          <Line
            type="monotone"
            dataKey="b"
            stroke="#6B432B"
            strokeWidth={3}
            fill="url(#gradB)"
            dot={false}
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}
