import React from 'react';
import { useTheme } from '../contexts/ThemeContext.tsx';

interface VistaLogoProps {
  theme?: 'light' | 'dark';
  className?: string;
  color?: string; // Allow explicit color override
  src?: string | null; // Allow explicit image source override
}

const VistaLogo: React.FC<VistaLogoProps> = ({ theme = 'dark', className = '', color, src }) => {
  const { customLogo } = useTheme();

  // Default logic if color is not provided:
  // light theme (dark bg) -> white text
  // dark theme (light bg) -> gold text
  const defaultColor = theme === 'light' ? '#ffffff' : '#b8882a';

  // Use explicit color if provided, otherwise fallback to theme logic
  const brandColor = color || defaultColor;

  // Prioritize passed src (e.g., footer logo), then global customLogo
  const activeLogoImage = src || customLogo;

  // If a custom logo (or overridden src) is present, display it instead of the SVG
  if (activeLogoImage) {
    return (
      <div className={`flex items-center gap-2 ${className} select-none h-[50px]`}>
        <img src={activeLogoImage} alt="Vista Cruises" className="h-full w-auto object-contain" />
      </div>
    );
  }

  return (
    <div className={`flex items-center gap-2 ${className} select-none`}>
      {/* Icon Graphic */}
      <div className="w-[50px] h-[50px] flex-shrink-0 relative">
        <svg viewBox="0 0 100 80" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full">
          {/* Left Arc (Sun/Globe) */}
          <path
            d="M 25 70 A 35 35 0 1 1 65 10"
            stroke={brandColor}
            strokeWidth="7"
            strokeLinecap="round"
            className="transition-colors duration-300"
          />

          {/* Top Sail */}
          <path
            d="M 35 48 C 55 40 75 25 95 12 L 95 18 C 75 32 55 48 35 55 Z"
            fill={brandColor}
            className="transition-colors duration-300"
          />

          {/* Middle Sail */}
          <path
            d="M 28 62 C 50 52 75 38 98 25 L 98 30 C 75 45 50 60 28 68 Z"
            fill={brandColor}
            className="transition-colors duration-300"
          />

          {/* Bottom Hull/Wave */}
          <path
            d="M 5 80 C 35 65 70 50 100 45 L 92 70 C 60 75 30 85 20 90 Z"
            fill={brandColor}
            className="transition-colors duration-300"
          />
        </svg>
      </div>

      {/* Text Brand */}
      <div className="flex flex-col items-start leading-none">
        <span
          className="text-[22px] font-serif font-bold tracking-wider transition-colors duration-300"
          style={{ color: brandColor }}
        >
          长江行游轮
        </span>
        <span
          className="text-[9px] tracking-[0.3em] font-sans mt-[2px] uppercase transition-colors duration-300"
          style={{ color: brandColor }}
        >
          Vista Cruises
        </span>
      </div>
    </div>
  );
};

export default VistaLogo;