import {
    ComposedChart,
    Line,
    XAxis,
    YAxis,
    Tooltip,
    ResponsiveContainer,
    Area
} 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-96 p-6 pb-0 pl-0">
            <ResponsiveContainer width="100%" height="90%">
                <ComposedChart data={data}>

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

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

                    <Area
                        type="monotone"
                        dataKey="a"
                        stroke="none"
                        fill="url(#gradA)"
                        fillOpacity={1}
                    />
                    <Area
                        type="monotone"
                        dataKey="b"
                        stroke="none"
                        fill="url(#gradB)"
                        fillOpacity={1}
                    />

                    <XAxis dataKey="name" tick={{ fontSize: 12 }} />
                    <YAxis tick={{ fontSize: 12 }} />

                    <Tooltip
                        contentStyle={{
                            background: "var(--bg-primary)",
                            border: "1px solid var(--border-color)",
                            color: "var(--text-primary)",
                        }}
                    />

                    <Line
                        type="monotone"
                        dataKey="a"
                        stroke="#b52424"
                        strokeWidth={3}
                        fill="url(#gradA)"
                        dot={false}
                    />
                    <Line
                        type="monotone"
                        dataKey="b"
                        stroke="#7f7376"
                        strokeWidth={3}
                        fill="url(#gradB)"
                        dot={false}
                    />

                </ComposedChart>
            </ResponsiveContainer>
        </div>
    );
}
