import type { ReactNode } from 'react';
import {
  ResponsiveContainer,
  type ResponsiveContainerProps,
} from 'recharts';
import { cn } from '@/lib/utils';

interface ChartContainerProps extends Omit<ResponsiveContainerProps, 'children'> {
  children: ReactNode;
  className?: string;
  title?: string;
  description?: string;
}

export function ChartContainer({
  children,
  className,
  title,
  description,
  ...props
}: ChartContainerProps) {
  return (
    <div className={cn('w-full', className)}>
      {(title || description) && (
        <div className="mb-4">
          {title && <h3 className="text-lg font-semibold">{title}</h3>}
          {description && (
            <p className="text-sm text-muted-foreground">{description}</p>
          )}
        </div>
      )}
      <div className="w-full overflow-hidden rounded-lg border bg-card p-4">
        <ResponsiveContainer {...props}>
          {children}
        </ResponsiveContainer>
      </div>
    </div>
  );
}