import React from 'react';
import { AlertCircle, Info, Lightbulb, Sparkles } from 'lucide-react';

export type InfoCardVariant = 'info' | 'warning' | 'success' | 'tip' | 'template';

interface InfoCardProps {
  title: string;
  description: string;
  variant?: InfoCardVariant;
  icon?: React.ReactNode;
  children?: React.ReactNode;
  className?: string;
}

/**
 * Unified InfoCard component for displaying consistent info/warning/tip blocks
 * across all onboarding wizard steps.
 *
 * Uses global styling and color palette for dark mode compatibility.
 */
export const InfoCard: React.FC<InfoCardProps> = ({
  title,
  description,
  variant = 'info',
  icon,
  children,
  className = '',
}) => {
  const getVariantStyles = () => {
    switch (variant) {
      case 'info':
        return {
          container: 'bg-[var(--color-info)]/10 border-[var(--color-info)]/20',
          icon: 'text-[var(--color-info)]',
          defaultIcon: <Info className="w-5 h-5" />,
        };
      case 'warning':
        return {
          container: 'bg-[var(--color-warning)]/10 border-[var(--color-warning)]/20',
          icon: 'text-[var(--color-warning)]',
          defaultIcon: <AlertCircle className="w-5 h-5" />,
        };
      case 'success':
        return {
          container: 'bg-[var(--color-success)]/10 border-[var(--color-success)]/20',
          icon: 'text-[var(--color-success)]',
          defaultIcon: <Sparkles className="w-5 h-5" />,
        };
      case 'tip':
        return {
          container: 'bg-[var(--color-primary)]/10 border-[var(--color-primary)]/20',
          icon: 'text-[var(--color-primary)]',
          defaultIcon: <Lightbulb className="w-5 h-5" />,
        };
      case 'template':
        return {
          container: 'bg-gradient-to-br from-purple-50 to-blue-50 dark:from-purple-900/10 dark:to-blue-900/10 border-purple-200 dark:border-purple-700',
          icon: 'text-purple-600 dark:text-purple-400',
          defaultIcon: <Sparkles className="w-5 h-5" />,
        };
      default:
        return {
          container: 'bg-[var(--color-info)]/10 border-[var(--color-info)]/20',
          icon: 'text-[var(--color-info)]',
          defaultIcon: <Info className="w-5 h-5" />,
        };
    }
  };

  const styles = getVariantStyles();

  return (
    <div className={`${styles.container} border rounded-lg p-4 ${className}`}>
      <h3 className="font-semibold text-[var(--text-primary)] mb-2 flex items-center gap-2">
        <span className={styles.icon}>
          {icon || styles.defaultIcon}
        </span>
        {title}
      </h3>
      <p className="text-sm text-[var(--text-secondary)]">
        {description}
      </p>
      {children && (
        <div className="mt-3">
          {children}
        </div>
      )}
    </div>
  );
};

export default InfoCard;
