import React, { ReactNode } from 'react';

interface ChartCardProps {
  title?: string;
  children: ReactNode;
  className?: string;
  headerRight?: ReactNode;
  fullWidth?: boolean;
  halfWidth?: boolean;
}

function ChartCard({ 
  title, 
  children, 
  className = '',
  headerRight = null,
  fullWidth = false,
  halfWidth = false
}: ChartCardProps) {
  const sizeClass = fullWidth ? 'full-width' : halfWidth ? 'half-width' : '';
  
  return (
    <div className={`chart-card ${sizeClass} ${className}`}>
      {(title || headerRight) && (
        <div className="chart-card-header">
          {title && <h2>{title}</h2>}
          {headerRight && <div className="chart-card-actions">{headerRight}</div>}
        </div>
      )}
      <div className="chart-container">
        {children}
      </div>
    </div>
  );
}

export default ChartCard;
