"use client";

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

interface LineChartData {
  date: string;
  value: number;
  [key: string]: string | number;
}

interface LineChartProps {
  data: LineChartData[];
  title?: string;
  dataKey?: string;
  color?: string;
  gradient?: boolean;
  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 relative overflow-hidden">
      <svg className="w-full h-full" preserveAspectRatio="none">
        <path
          d="M0,150 Q50,100 100,120 T200,80 T300,100 T400,60 T500,90"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          className="text-muted-foreground/20"
        />
      </svg>
    </div>
  </div>
);

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

export default function ModernLineChart({
  data,
  title,
  dataKey = "value",
  color = "hsl(var(--primary))",
  gradient = true,
  height = 300,
  className,
}: LineChartProps) {
  return (
    <Card className={className}>
      {title && (
        <CardHeader>
          <CardTitle className="text-lg font-semibold">{title}</CardTitle>
        </CardHeader>
      )}
      <CardContent>
        <LineChartInner
          data={data}
          dataKey={dataKey}
          color={color}
          gradient={gradient}
          height={height}
        />
      </CardContent>
    </Card>
  );
}