"use client";

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

const MUTED = "#8A93A6";
const GOLD = "#F5B93F";

export function RevenueChart({ data }: { data: { label: string; revenue: number }[] }) {
  return (
    <ResponsiveContainer width="100%" height={260}>
      <AreaChart data={data} margin={{ top: 8, right: 8, left: -12, bottom: 0 }}>
        <defs>
          <linearGradient id="revenueFill" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={GOLD} stopOpacity={0.35} />
            <stop offset="100%" stopColor={GOLD} stopOpacity={0} />
          </linearGradient>
        </defs>
        <CartesianGrid strokeDasharray="3 3" stroke={MUTED} strokeOpacity={0.12} vertical={false} />
        <XAxis
          dataKey="label"
          tick={{ fill: MUTED, fontSize: 11 }}
          axisLine={false}
          tickLine={false}
          interval="preserveStartEnd"
        />
        <YAxis
          tick={{ fill: MUTED, fontSize: 11 }}
          axisLine={false}
          tickLine={false}
          tickFormatter={(v) => (v >= 1000 ? `${v / 1000}k` : v)}
          width={40}
        />
        <Tooltip
          contentStyle={{
            background: "#141824",
            border: "none",
            borderRadius: 12,
            fontSize: 12,
            color: "#F3F5F8",
          }}
          formatter={(value: number) => [`Rs ${value.toLocaleString()}`, "Revenue"]}
          labelStyle={{ color: "#8A93A6", marginBottom: 4 }}
        />
        <Area
          type="monotone"
          dataKey="revenue"
          stroke={GOLD}
          strokeWidth={2.5}
          fill="url(#revenueFill)"
        />
      </AreaChart>
    </ResponsiveContainer>
  );
}