'use client';

import Image from 'next/image';
import { useState } from 'react';

interface LogoProps {
  variant?: 'default' | 'white';
  size?: 'sm' | 'md' | 'lg';
  showText?: boolean;
  className?: string;
}

export default function Logo({
  variant = 'default',
  size = 'md',
  showText = true,
  className = ''
}: LogoProps) {
  const [imageError, setImageError] = useState(false);

  // Tailles selon le size prop
  const sizes = {
    sm: { width: 80, height: 40, textSize: 'text-sm', iconSize: 'text-2xl' },
    md: { width: 120, height: 50, textSize: 'text-base', iconSize: 'text-3xl' },
    lg: { width: 160, height: 60, textSize: 'text-lg', iconSize: 'text-4xl' },
  };

  const sizeConfig = sizes[size];

  // Déterminer le chemin du logo selon la variante
  const logoPath = variant === 'white'
    ? '/logos/logo-white.svg'
    : '/logos/logo.svg';

  const logoPathPNG = variant === 'white'
    ? '/logos/logo-white.png'
    : '/logos/logo.png';

  // Couleurs de texte selon la variante
  const textColor = variant === 'white' ? 'text-white' : 'text-gray-900';
  const subtextColor = variant === 'white' ? 'text-gray-300' : 'text-gray-600';

  // Si une image personnalisée existe et n'a pas d'erreur, l'utiliser
  if (!imageError) {
    return (
      <div className={`flex items-center gap-2 ${className}`}>
        <Image
          src={logoPath}
          alt="Thé Tip Top Logo"
          width={sizeConfig.width}
          height={sizeConfig.height}
          priority
          className="object-contain"
          onError={() => {
            // Si SVG échoue, essayer PNG
            const img = document.createElement('img');
            img.src = logoPathPNG;
            img.onerror = () => setImageError(true);
          }}
        />
      </div>
    );
  }

  // Fallback : utiliser l'emoji et le texte
  return (
    <div className={`flex items-center gap-2 ${className}`}>
      <span className={sizeConfig.iconSize}>🍵</span>
      {showText && (
        <div className="flex flex-col">
          <span className={`font-bold ${sizeConfig.textSize} ${textColor}`}>
            Thé Tip Top
          </span>
          <span className={`text-xs ${subtextColor} hidden sm:block`}>
            Jeu-Concours 2024
          </span>
        </div>
      )}
    </div>
  );
}