"use client";

import dynamic from "next/dynamic";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

interface BarChartData {
  name: string;
  value: number;
  [key: string]: string | number;
}

interface BarChartProps {
  data: BarChartData[];
  title?: string;
  dataKey?: string;
  colors?: string[];
  height?: number;
  className?: string;
}

const ChartSkeleton = ({ height = 300 }: { height?: number }) => (
  <div className="animate-pulse" style={{ height }}>
    <div className="h-full w-full bg-muted rounded-md flex items-end justify-around px-4 pb-8">
      {[...Array(6)].map((_, i) => (
        <div
          key={i}
          className="bg-muted-foreground/20 rounded-t"
          style={{ width: "12%", height: `${20 + Math.random() * 60}%` }}
        />
      ))}
    </div>
  </div>
);

const BarChartInner = dynamic(() => import("./bar-chart-inner"), {
  ssr: false,
  loading: () => <ChartSkeleton />,
});

export default function ModernBarChart({
  data,
  title,
  dataKey = "value",
  colors = [
    "hsl(var(--chart-1))",
    "hsl(var(--chart-2))",
    "hsl(var(--chart-3))",
    "hsl(var(--chart-4))",
    "hsl(var(--chart-5))",
  ],
  height = 300,
  className,
}: BarChartProps) {
  return (
    <Card className={className}>
      {title && (
        <CardHeader>
          <CardTitle className="text-lg font-semibold">{title}</CardTitle>
        </CardHeader>
      )}
      <CardContent>
        <BarChartInner
          data={data}
          dataKey={dataKey}
          colors={colors}
          height={height}
        />
      </CardContent>
    </Card>
  );
}