Revenue — Chart

"use client";

import { Area, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis } from "recharts";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  ChartContainer,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart";

const DATA = [
  { month: "Jan", revenue: 4200 },
  { month: "Feb", revenue: 5100 },
  { month: "Mar", revenue: 4700 },
  { month: "Apr", revenue: 6200 },
  { month: "May", revenue: 5800 },
  { month: "Jun", revenue: 7400 },
];

const CONFIG: ChartConfig = {
  revenue: { label: "Revenue", theme: "--chart-1" },
};

export function RevenueChartBlock() {
  return (
    <section className="p-6">
      <Card className="mx-auto max-w-md">
        <CardHeader className="pb-3">
          <CardTitle className="flex items-center justify-between text-base">
            Revenue
            <Badge variant="secondary">+24%</Badge>
          </CardTitle>
          <p className="text-sm text-muted-foreground">Last 6 months</p>
        </CardHeader>
        <CardContent>
          <ChartContainer config={CONFIG} height={200} className="w-full">
            <AreaChart data={DATA} margin={{ left: 4, right: 8, top: 4, bottom: 4 }}>
              <defs>
                <linearGradient id="blockFillRevenue" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="var(--color-revenue)" stopOpacity={0.5} />
                  <stop offset="95%" stopColor="var(--color-revenue)" stopOpacity={0.04} />
                </linearGradient>
              </defs>
              <CartesianGrid vertical={false} />
              <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
              <YAxis tickLine={false} axisLine={false} width={36} />
              <Tooltip cursor={false} content={<ChartTooltipContent />} />
              <Area
                dataKey="revenue"
                type="monotone"
                stroke="var(--color-revenue)"
                strokeWidth={2}
                fill="url(#blockFillRevenue)"
              />
            </AreaChart>
          </ChartContainer>
        </CardContent>
      </Card>
    </section>
  );
}