import React, { ReactNode } from 'react';
import { __ } from '@/lib/i18n';

interface ChartCardProps {
  title: string;
  description?: string;
  children: ReactNode;
  actions?: ReactNode;
  loading?: boolean;
  height?: number;
  enableMobileScroll?: boolean; // Enable horizontal scroll on mobile
  dataPoints?: number; // Number of data points (for calculating mobile width)
}

export function ChartCard({ 
  title, 
  description, 
  children, 
  actions,
  loading = false,
  height = 300,
  enableMobileScroll = true,
  dataPoints = 30
}: ChartCardProps) {
  // Calculate minimum width for mobile based on data points
  // Each data point needs ~40px for readability
  const mobileMinWidth = Math.max(600, dataPoints * 40);
  
  if (loading) {
    return (
      <div className="rounded-lg border bg-card p-6">
        <div className="flex items-center justify-between mb-6">
          <div className="space-y-2">
            <div className="h-5 bg-muted rounded w-32 animate-pulse"></div>
            {description && <div className="h-4 bg-muted rounded w-48 animate-pulse"></div>}
          </div>
        </div>
        <div 
          className="bg-muted rounded animate-pulse" 
          style={{ height: `${height}px` }}
        ></div>
      </div>
    );
  }

  return (
    <div className="rounded-lg border bg-card p-6">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h2 className="text-lg font-semibold">{title}</h2>
          {description && (
            <p className="text-sm text-muted-foreground">{description}</p>
          )}
        </div>
        {actions && <div className="flex gap-2">{actions}</div>}
      </div>
      
      {/* Chart container with mobile scroll */}
      {enableMobileScroll ? (
        <div className="overflow-x-auto -mx-6 px-6 md:mx-0 md:px-0">
          <div 
            className="md:w-full"
            style={{ 
              minWidth: `${mobileMinWidth}px`,
              width: '100%'
            }}
          >
            {children}
          </div>
        </div>
      ) : (
        children
      )}
    </div>
  );
}
