import { cn } from '@/lib/utils';

type ChartContainerProps = {
  children: React.ReactNode;
  height?: number;
  loading?: boolean;
  error?: string | null;
  className?: string;
};

export function ChartContainer({
  children,
  height = 400,
  loading = false,
  error = null,
  className
}: ChartContainerProps) {
  return (
    <div
      className={cn(
        'relative w-full rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)]',
        className
      )}
      style={{ height: `${height}px` }}
    >
      {loading && (
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="text-sm text-[color:var(--terminal-muted)]">Loading chart...</div>
        </div>
      )}

      {error && (
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="text-sm text-[color:var(--danger)]">{error}</div>
        </div>
      )}

      {!loading && !error && (
        <div className="h-full w-full p-4">
          {children}
        </div>
      )}
    </div>
  );
}