"use client";

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

interface EarningsChartProps {
  data: { date: string; total: number }[];
}

export default function EarningsChart({ data }: EarningsChartProps) {
  if (!data.length) return null;

  return (
    <div className="bg-surface rounded-xl border border-surface-light p-6">
      <h2 className="text-lg font-semibold text-text mb-4">
        Earnings — Last 7 Days
      </h2>
      <div className="h-64">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart data={data}>
            <XAxis
              dataKey="date"
              tick={{ fill: "#9ca3af", fontSize: 12 }}
              axisLine={{ stroke: "#374151" }}
              tickLine={false}
            />
            <YAxis
              tick={{ fill: "#9ca3af", fontSize: 12 }}
              axisLine={{ stroke: "#374151" }}
              tickLine={false}
              width={50}
            />
            <Tooltip
              contentStyle={{
                backgroundColor: "#1f2937",
                border: "1px solid #374151",
                borderRadius: "8px",
                color: "#f9fafb",
                fontSize: "12px",
              }}
              labelStyle={{ color: "#d4af37" }}
              formatter={(value) => [`${value} credits`, "Earnings"]}
            />
            <Bar
              dataKey="total"
              fill="#d4af37"
              radius={[4, 4, 0, 0]}
              maxBarSize={48}
            />
          </BarChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}