"use client";

import dynamic from "next/dynamic";

interface ResponseTimeDistributionProps {
  data: number[];
  average: number;
  targetResponseTime?: number;
}

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

const ResponseTimeDistributionChart = dynamic(
  () => import("./ResponseTimeDistributionChart"),
  {
    ssr: false,
    loading: () => <ChartSkeleton />,
  }
);

export default function ResponseTimeDistribution(
  props: ResponseTimeDistributionProps
) {
  if (!props.data || !props.data.length) {
    return (
      <div className="flex items-center justify-center h-64 text-muted-foreground">
        No response time data available
      </div>
    );
  }

  return <ResponseTimeDistributionChart {...props} />;
}