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

export interface ChartProps {
  children: ReactNode;
  title?: string;
  className?: string;
  height?: number;
  width?: number;
}

/**
 * Composant de base pour les charts.
 */
export function Chart({
  children,
  title,
  className,
  height = 300,
  width,
}: ChartProps) {
  return (
    <div className={cn('w-full', className)}>
      {title && (
        <h3 className="mb-4 text-lg font-semibold text-foreground">{title}</h3>
      )}
      <div
        className="w-full"
        style={{ height: `${height}px`, width: width ? `${width}px` : '100%' }}
      >
        {children}
      </div>
    </div>
  );
}