import { ChartContainer, PieChart, Pie, Cell, ChartTooltip, ChartLegend, ChartLegendContent } from '@photonix/ultimate';

const config = {
  mobile: { label: 'Mobile', color: 'var(--chart-1)' },
  desktop: { label: 'Desktop', color: 'var(--chart-2)' },
  // ...
};

const data = [
  { name: 'Mobile', value: 400 },
  { name: 'Desktop', value: 300 },
  // ...
];

<ChartContainer config={config}>
  <PieChart>
    <Pie data={data} dataKey="value">
        {data.map((entry, index) => {
             // Logic to find corresponding color from config
             // In a real app, data entries usually have a 'key' or 'id' matching the config key.
             const configKey = Object.keys(config).find(k => config[k].label === entry.name);
             return (
                <Cell 
                    key={index} 
                    fill={config[configKey]?.color}
                />
             );
        })}
    </Pie>
    <ChartTooltip />
    <ChartLegend />
  </PieChart>
</ChartContainer>