import { ChartContainer, LineChart, Line, 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}>
  <LineChart 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 }}
    />
    <ChartTooltip />
    <ChartLegend content={<ChartLegendContent />} />
    <Line type="monotone" dataKey="sales" stroke="var(--color-sales)" />
    <Line type="monotone" dataKey="profit" stroke="var(--color-profit)" />
  </LineChart>
</ChartContainer>