import Link from 'next/link';
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) {
  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 ? (
                <img src={logo} alt={siteName} className="h-8 w-auto" />
              ) : (
                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
                  <span className="text-white font-bold text-sm">KLZ</span>
                </div>
              )}
              <span className="hidden sm:block font-bold text-lg 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} />
          </div>
        </div>
      </Container>
    </header>
  );
}