"use client";

import {
  Area,
  AreaChart,
  CartesianGrid,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import { formatNumber } from "@/lib/format";

interface ChartPoint {
  label: string;
  revenue: number;
}

export function OverviewMiniChart({
  data,
  numberLocale,
}: {
  data: ChartPoint[];
  numberLocale: string;
}) {
  if (data.length === 0) return null;

  return (
    <ResponsiveContainer width="100%" height="100%">
      <AreaChart data={data} margin={{ top: 8, right: 4, left: 0, bottom: 0 }}>
        <defs>
          <linearGradient id="ovRevFill" x1="0" y1="0" x2="0" y2="1">
            <stop offset="5%" stopColor="#10b981" stopOpacity={0.28} />
            <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
          </linearGradient>
        </defs>
        <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.04)" vertical={false} />
        <XAxis
          dataKey="label"
          tick={{ fill: "#475569", fontSize: 10 }}
          axisLine={false}
          tickLine={false}
          interval="preserveStartEnd"
        />
        <YAxis
          tick={{ fill: "#475569", fontSize: 10 }}
          axisLine={false}
          tickLine={false}
          width={52}
          tickFormatter={(v: number) => formatNumber(v, numberLocale)}
        />
        <Tooltip
          contentStyle={{
            background: "rgba(2,6,23,0.96)",
            border: "1px solid rgba(51,65,85,0.7)",
            borderRadius: "10px",
            color: "#e2e8f0",
            fontSize: 12,
          }}
          itemStyle={{ color: "#10b981" }}
          formatter={(v: number) => [formatNumber(v, numberLocale), ""]}
          labelStyle={{ color: "#94a3b8", marginBottom: 2 }}
        />
        <Area
          type="monotone"
          dataKey="revenue"
          stroke="#10b981"
          strokeWidth={2}
          fill="url(#ovRevFill)"
          dot={false}
          activeDot={{ r: 4, fill: "#10b981", stroke: "#020617", strokeWidth: 2 }}
        />
      </AreaChart>
    </ResponsiveContainer>
  );
}
