import { ReactNode } from 'react';

interface CardProps {
  title: string;
  children: ReactNode;
  className?: string;
  colorScheme?: 'blue' | 'green' | 'red' | 'purple' | 'teal' | 'orange' | 'pink' | 'yellow' | 'none';
  glowEffect?: boolean;
}

export default function Card({ 
  title, 
  children, 
  className = '',
  colorScheme = 'none',
  glowEffect = false
}: CardProps) {
  // Only add color-specific classes if a colorScheme is specified
  const headerColor = colorScheme !== 'none' ? {
    blue: 'text-accent-blue',
    green: 'text-accent-green',
    red: 'text-accent-red',
    purple: 'text-accent-purple',
    teal: 'text-accent-teal',
    orange: 'text-accent-orange',
    pink: 'text-accent-pink',
    yellow: 'text-accent-yellow',
  }[colorScheme] : 'text-foreground';
  
  const glowClass = glowEffect && colorScheme !== 'none' ? {
    blue: 'shadow-[0_0_15px_rgba(59,130,246,0.15)]',
    green: 'shadow-[0_0_15px_rgba(16,185,129,0.15)]',
    red: 'shadow-[0_0_15px_rgba(244,63,94,0.15)]',
    purple: 'shadow-[0_0_15px_rgba(139,92,246,0.15)]',
    teal: 'shadow-[0_0_15px_rgba(20,184,166,0.15)]',
    orange: 'shadow-[0_0_15px_rgba(249,115,22,0.15)]',
    pink: 'shadow-[0_0_15px_rgba(236,72,153,0.15)]',
    yellow: 'shadow-[0_0_15px_rgba(245,158,11,0.15)]',
  }[colorScheme] : '';
  
  // Define the indicator dot color
  const indicatorColor = colorScheme !== 'none' ? `bg-accent-${colorScheme}` : 'bg-gray-500';
  
  return (
    <div className={`bg-card-bg border border-card-border rounded-lg ${glowClass} ${className}`}>
      <div className="flex items-center border-b border-card-border p-5 pb-4">
        <h2 className={`text-lg font-medium ${headerColor}`}>{title}</h2>
        {colorScheme !== 'none' && (
          <div className={`ml-2 h-1.5 w-1.5 rounded-full ${indicatorColor}`}></div>
        )}
      </div>
      <div className="p-5 pt-4">
        {children}
      </div>
    </div>
  );
}