"use client";

import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts";

interface WeekData {
  week: string;
  cam: number;
  purchases: number;
  tips: number;
  subscriptions: number;
}

export default function SpendingChart({ data }: { data: WeekData[] }) {
  return (
    <div className="w-full h-[350px]">
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={data} margin={{ top: 5, right: 20, left: 10, bottom: 5 }}>
          <CartesianGrid strokeDasharray="3 3" stroke="#333" />
          <XAxis dataKey="week" tick={{ fill: "#999", fontSize: 12 }} />
          <YAxis tick={{ fill: "#999", fontSize: 12 }} />
          <Tooltip
            contentStyle={{
              backgroundColor: "#1a1a2e",
              border: "1px solid #333",
              borderRadius: "8px",
              color: "#fff",
            }}
          />
          <Legend wrapperStyle={{ color: "#999", fontSize: 12 }} />
          <Bar dataKey="cam" name="Cam Sessions" fill="#a855f7" radius={[2, 2, 0, 0]} />
          <Bar dataKey="purchases" name="Purchases" fill="#3b82f6" radius={[2, 2, 0, 0]} />
          <Bar dataKey="tips" name="Tips" fill="#22c55e" radius={[2, 2, 0, 0]} />
          <Bar dataKey="subscriptions" name="Subscriptions" fill="#d4a843" radius={[2, 2, 0, 0]} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}