"use client";

import { useState, useEffect } from "react";

interface LogoProps {
  size?: number;
  className?: string;
}

export default function Logo({ size = 120, className = "" }: LogoProps) {
  const [imageError, setImageError] = useState(false);
  const [imageLoaded, setImageLoaded] = useState(false);

  useEffect(() => {
    const img = new window.Image();
    img.onload = () => setImageLoaded(true);
    img.onerror = () => setImageError(true);
    // Essayer d'abord le SVG, puis le PNG en fallback
    img.src = "/logo-relais-marama.svg";
  }, []);

  if (imageError || !imageLoaded) {
    return (
      <div className={`flex flex-col items-center justify-center ${className}`}>
        <div
          className="bg-gradient-to-br from-primary/20 to-secondary rounded-full flex flex-col items-center justify-center text-primary font-bold border-2 border-primary/30"
          style={{ width: size, height: size }}
        >
          <span className="text-2xl mb-1">🏝️</span>
          <span style={{ fontSize: size * 0.2 }}>Relais</span>
          <span style={{ fontSize: size * 0.15 }}>Marama</span>
        </div>
        <p className="text-primary font-semibold mt-2" style={{ fontSize: `${size * 0.15}px` }}>
          Fakarava
        </p>
      </div>
    );
  }

  return (
    <div className={`flex flex-col items-center justify-center ${className}`}>
      <img
        src="/logo-relais-marama.svg"
        alt="Relais Marama - Fakarava"
        width={size}
        height={size}
        className="object-contain"
        style={{ maxWidth: `${size}px`, maxHeight: `${size}px` }}
      />
      <p className="text-primary font-semibold mt-2" style={{ fontSize: `${size * 0.15}px` }}>
        Fakarava
      </p>
    </div>
  );
}