import React from 'react';
import Link from 'next/link';

interface BrandLogoProps {
  className?: string;
  showText?: boolean;
  variant?: 'light' | 'dark';
}

export function BrandLogo({ className = '', showText = true, variant = 'light' }: BrandLogoProps) {
  const isDark = variant === 'dark';

  return (
    <Link href="/" className={`flex items-center gap-3 shrink-0 group ${className}`}>
      {/* Official Indian Books Worldwide Graphic: Blue Globe over Green Open Book */}
      <div className="relative w-10 h-10 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform duration-200">
        <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full">
          {/* Globe Grid - Royal Blue (#0073bc) */}
          <path
            d="M50 10C27.9086 10 10 27.9086 10 50C10 57.5 12.1 64.5 15.8 70.5C21.5 58 35.5 50 50 50C64.5 50 78.5 58 84.2 70.5C87.9 64.5 90 57.5 90 50C90 27.9086 72.0914 10 50 10Z"
            fill="#0073bc"
          />
          {/* Globe Latitude Lines */}
          <circle cx="50" cy="50" r="38" stroke="#0073bc" strokeWidth="6" fill="none" />
          <ellipse cx="50" cy="50" rx="38" ry="16" stroke="white" strokeWidth="4" fill="none" />
          <ellipse cx="50" cy="50" rx="18" ry="38" stroke="white" strokeWidth="4" fill="none" />
          <line x1="50" y1="12" x2="50" y2="88" stroke="white" strokeWidth="5" />

          {/* Open Book Wings - Olive Green (#8ab428) */}
          <path
            d="M50 54C34 54 18 64 12 76C24 74 38 72 50 82C62 72 76 74 88 76C82 64 66 54 50 54Z"
            fill="#8ab428"
          />
          <path
            d="M50 58C36 58 22 66 16 78C26 76 38 74 50 82C62 74 76 74 84 78C78 66 64 58 50 58Z"
            fill="#79a021"
          />
        </svg>
      </div>

      {showText && (
        <div className="flex flex-col">
          <span className={`font-black text-lg tracking-tight leading-none ${
            isDark ? 'text-white' : 'text-zinc-800 dark:text-zinc-100'
          }`}>
            INDIAN BOOKS
          </span>
          <span className={`font-extrabold text-[10px] uppercase tracking-[0.22em] mt-0.5 leading-none ${
            isDark ? 'text-zinc-400' : 'text-zinc-500 dark:text-zinc-400'
          }`}>
            WORLDWIDE
          </span>
        </div>
      )}
    </Link>
  );
}