import * as React from 'react';
import { Suspense, memo } from 'react';
import { cn } from '@/lib/utils';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';
import { Skeleton } from './skeleton';

export interface ChartContainerProps {
    title: string;
    description?: string;
    height?: number;
    children: React.ReactNode;
    className?: string;
    isLoading?: boolean;
}

function ChartSkeleton({ height = 300 }: { height?: number }) {
    return (
        <div className="space-y-3" style={{ height }}>
            <Skeleton className="h-full w-full" />
        </div>
    );
}

const ChartContainer = memo(function ChartContainer({
    title,
    description,
    height = 300,
    children,
    className,
    isLoading = false,
}: ChartContainerProps) {
    return (
        <Card className={cn('', className)}>
            <CardHeader className="pb-2">
                <CardTitle className="text-lg">{title}</CardTitle>
                {description && <CardDescription>{description}</CardDescription>}
            </CardHeader>
            <CardContent>
                {isLoading ? (
                    <ChartSkeleton height={height} />
                ) : (
                    <Suspense fallback={<ChartSkeleton height={height} />}>
                        {children}
                    </Suspense>
                )}
            </CardContent>
        </Card>
    );
});

export { ChartContainer, ChartSkeleton };