import Link from 'next/link';
import Image from 'next/image';
import { Container } from '@/components/ui/Container';
import { Button } from '@/components/ui/Button';
import { Navigation } from './Navigation';
import { LocaleSwitcher } from '@/components/LocaleSwitcher';
import { MobileMenu } from './MobileMenu';

interface HeaderProps {
  locale: string;
  siteName?: string;
  logo?: string;
}

export function Header({ locale, siteName = 'KLZ Cables', logo }: HeaderProps) {
  const isSvgLogo = logo?.endsWith('.svg');
  
  return (
    <header className="sticky top-0 z-50 bg-white border-b border-gray-200 shadow-sm">
      <Container maxWidth="6xl" padding="md">
        <div className="flex items-center justify-between h-16">
          {/* Logo and Branding */}
          <div className="flex items-center gap-3">
            <Link
              href={`/${locale}`}
              className="flex items-center gap-2 hover:opacity-80 transition-opacity"
            >
              {logo ? (
                <div className="h-8 sm:h-10 md:h-12 w-auto flex items-center justify-center">
                  {isSvgLogo ? (
                    // For SVG, use img tag with proper path handling
                    <img
                      src={logo}
                      alt={siteName}
                      className="h-full w-auto object-contain"
                    />
                  ) : (
                    // For other images, use Next.js Image with optimized sizes
                    <div className="relative h-8 sm:h-10 md:h-12 w-auto">
                      <Image
                        src={logo}
                        alt={siteName}
                        fill
                        className="object-contain"
                        sizes="(max-width: 640px) 100vw, (max-width: 768px) 120px, 144px"
                        priority={false}
                      />
                    </div>
                  )}
                </div>
              ) : (
                <div className="w-8 sm:w-10 md:w-12 h-8 sm:h-10 md:h-12 bg-primary rounded-lg flex items-center justify-center">
                  <span className="text-white font-bold text-xs sm:text-sm">KLZ</span>
                </div>
              )}
              <span className="hidden sm:block font-bold text-lg md:text-xl text-gray-900">
                {siteName}
              </span>
            </Link>
          </div>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center gap-6">
            <Navigation locale={locale} variant="header" />
            <LocaleSwitcher />
            <Link href={`/${locale}/contact`}>
              <Button
                variant="primary"
                size="sm"
              >
                Contact Us
              </Button>
            </Link>
          </div>

          {/* Mobile Menu */}
          <div className="flex items-center gap-2">
            <MobileMenu locale={locale} siteName={siteName} logo={logo} />
          </div>
        </div>
      </Container>
    </header>
  );
}