import React from 'react';

interface CaStADLogoProps {
  size?: 'sm' | 'md' | 'lg' | 'xl';
  showText?: boolean;
  className?: string;
}

const sizeClasses = {
  sm: { icon: 'w-8 h-8', text: 'text-lg' },
  md: { icon: 'w-12 h-12', text: 'text-xl' },
  lg: { icon: 'w-16 h-16', text: 'text-2xl' },
  xl: { icon: 'w-24 h-24', text: 'text-4xl' },
};

// Main CaStAD Logo with custard pudding icon
export const CaStADLogo: React.FC<CaStADLogoProps> = ({
  size = 'md',
  showText = true,
  className
}) => {
  const { icon, text } = sizeClasses[size];

  return (
    <div className={`flex items-center gap-2 ${className || ''}`}>
      {/* Custard Pudding SVG Icon */}
      <div className={`${icon} relative`}>
        <img
          src="/images/castad-logo.svg"
          alt="CaStAD"
          className="w-full h-full object-contain"
        />
      </div>
      {showText && (
        <div className="flex flex-col">
          <span className={`${text} font-bold bg-gradient-to-r from-amber-600 via-amber-500 to-yellow-600 bg-clip-text text-transparent`}>
            CaStAD
          </span>
          <span className="text-[10px] text-muted-foreground tracking-wide">
            카스타드
          </span>
        </div>
      )}
    </div>
  );
};

// Inline version with custard cream colors
export const CaStADLogoInline: React.FC<CaStADLogoProps> = ({
  size = 'md',
  className
}) => {
  const { icon, text } = sizeClasses[size];

  return (
    <div className={`flex items-center gap-2 ${className || ''}`}>
      {/* Custard emoji as simple icon */}
      <span className={`${icon} flex items-center justify-center`}>
        <span className="text-2xl">🍮</span>
      </span>
      <span className={`${text} font-bold bg-gradient-to-r from-amber-600 via-amber-500 to-yellow-600 bg-clip-text text-transparent`}>
        CaStAD
      </span>
    </div>
  );
};

// Icon only version
export const CaStADIcon: React.FC<{ size?: 'sm' | 'md' | 'lg' | 'xl'; className?: string }> = ({
  size = 'md',
  className
}) => {
  const { icon } = sizeClasses[size];

  return (
    <div className={`${icon} ${className || ''}`}>
      <img
        src="/images/castad-logo.svg"
        alt="CaStAD"
        className="w-full h-full object-contain"
      />
    </div>
  );
};

// Text only gradient version
export const CaStADText: React.FC<{ size?: 'sm' | 'md' | 'lg' | 'xl'; className?: string }> = ({
  size = 'md',
  className
}) => {
  const { text } = sizeClasses[size];

  return (
    <span className={`${text} font-bold bg-gradient-to-r from-amber-600 via-amber-500 to-yellow-600 bg-clip-text text-transparent ${className || ''}`}>
      CaStAD
    </span>
  );
};

export default CaStADLogo;