"use client";

import { AreaChart } from "@/components/charts/area-chart";
import { formatDate, formatNumber } from "@/lib/format";

type Props = {
  data: Array<{ date: string; clicks: number; impressions: number; sessions: number }>;
};

export function AnalyticsChart({ data }: Props) {
  return (
    <AreaChart
      data={data}
      xKey="date"
      series={[
        { key: "impressions", label: "Impressions", color: "#60a5fa", axis: "right" },
        { key: "clicks", label: "Clics", color: "#fbbf24", axis: "left" },
        { key: "sessions", label: "Sessions", color: "#a78bfa", axis: "left" },
      ]}
      height={280}
      formatX={(v) => formatDate(v as string)}
      formatY={(v) => formatNumber(v)}
      formatYRight={(v) => formatNumber(v)}
      formatTooltipValue={(v) => formatNumber(v)}
    />
  );
}