Chart

"use client";

import Link from "next/link";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart";
import { Button } from "@/components/ui/button";
import { ChartClientOnly } from "@/components/charts/chart-client-only";
import { buildSeriesConfig } from "@/lib/chart-series";
import { formatInteger } from "@/lib/chart-format";
import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion";
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
import { ArrowRightIcon } from "lucide-react";
import { ICON_SIZES, ICON_STROKE } from "@/lib/icons";

const data = [
  { month: "Jan", leads: 120 },
  { month: "Fev", leads: 180 },
  { month: "Mar", leads: 140 },
  { month: "Abr", leads: 210 },
];

const chartConfig = buildSeriesConfig([
  { key: "leads", label: "Leads (ilustrativo)" },
]) satisfies ChartConfig;

function ChartPreview() {
  const reducedMotion = usePrefersReducedMotion();

  return (
    <ChartContainer config={chartConfig} className="min-h-(--fe-chart-height-sm) w-full">
      <BarChart accessibilityLayer data={data}>
        <CartesianGrid vertical={false} strokeDasharray="3 4" />
        <XAxis
          dataKey="month"
          tickLine={false}
          tickMargin={8}
          axisLine={false}
        />
        <YAxis
          domain={[0, "auto"]}
          tickLine={false}
          axisLine={false}
          width={36}
          tickFormatter={(v) => formatInteger(Number(v))}
        />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Bar
          dataKey="leads"
          fill="var(--color-leads)"
          radius={4}
          isAnimationActive={!reducedMotion}
        />
      </BarChart>
    </ChartContainer>
  );
}

export function Demo() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-fe-4">
      <ChartClientOnly>
        <ChartPreview />
      </ChartClientOnly>
      <Button variant="link" className="h-auto self-start px-0" asChild>
        <Link href="/design-system/charts">
          Ver catálogo de gráficos
          <ArrowRightIcon
            size={ICON_SIZES.sm}
            strokeWidth={ICON_STROKE}
            aria-hidden
          />
        </Link>
      </Button>
    </div>
  );
}