export function BarChartViz({
  data,
  xAxisKey,
  yAxisKeys,
  config,
  showLegend = true,
  showGrid = true,
}: BarChartVizProps) {
  return (
    <ChartContainer className="h-full w-full" config={config}>
      <BarChart
        accessibilityLayer
        data={data}
        margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
      >
        {showGrid && <CartesianGrid vertical={false} />}
        <XAxis
          axisLine={false}
          dataKey={xAxisKey}
          tickFormatter={(value) => String(value).slice(0, 10)}
          tickLine={false}
          tickMargin={10}
        />
        <YAxis axisLine={false} tickLine={false} tickMargin={10} />
        <ChartTooltip content={<ChartTooltipContent />} />
        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
        {yAxisKeys.map((key) => (
          <Bar
            dataKey={key}
            fill={`var(--color-${key})`}
            key={key}
            radius={4}
          />
        ))}
      </BarChart>
    </ChartContainer>
  );
}