import { ChartContainer, AreaChart, Area, ChartTooltip, CartesianGrid, XAxis, YAxis, ChartLegend, ChartLegendContent } from '@photonix/ultimate';

const config = {
  sales: { label: 'Sales', color: 'var(--chart-1)' },
  profit: { label: 'Profit', color: 'var(--chart-2)' }
};

<ChartContainer config={config}>
  <AreaChart data={data}>
    <CartesianGrid vertical={false} stroke="var(--border-neutral-tertiary)" strokeDasharray="4 4" />
    <XAxis
        dataKey="month"
        axisLine={false}
        tickLine={false}
        tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }}
        dy={10}
    />
    <YAxis
        axisLine={false}
        tickLine={false}
        tick={{ fill: 'var(--text-neutral-secondary)', fontSize: 12 }}
    />
    <Area
      type="monotone"
      dataKey="sales"
      stroke="var(--color-sales)"
      fill="var(--color-sales)"
      fillOpacity={0.2}
    />
    <Area
      type="monotone"
      dataKey="profit"
      stroke="var(--color-profit)"
      fill="var(--color-profit)"
      fillOpacity={0.2}
    />
    <ChartTooltip />
    <ChartLegend content={<ChartLegendContent />} />
  </AreaChart>
</ChartContainer>