import { Search, ShoppingCart, User, Menu } from 'lucide-react';
import { useState } from 'react';

interface StoreNavbarProps {
  logo?: string;
  storeName?: string;
  cartCount?: number;
  isLoggedIn?: boolean;
}

export default function StoreNavbar({ logo, storeName = 'ร้านของฉัน', cartCount = 0, isLoggedIn }: StoreNavbarProps) {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <header className="bg-white shadow-sm sticky top-0 z-40">
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center gap-4">
            <button
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              className="p-2 hover:bg-gray-100 rounded-lg lg:hidden"
            >
              <Menu className="w-5 h-5" />
            </button>
            
            <a href="/" className="flex items-center gap-2">
              {logo ? (
                <img src={logo} alt={storeName} className="h-8 w-auto" />
              ) : (
                <span className="text-xl font-bold">{storeName}</span>
              )}
            </a>
          </div>
          
          <div className="hidden lg:flex items-center gap-6">
            <a href="/products" className="text-gray-700 hover:text-blue-600">สินค้า</a>
            <a href="/vendors" className="text-gray-700 hover:text-blue-600">ร้านค้า</a>
            <a href="/about" className="text-gray-700 hover:text-blue-600">เกี่ยวกับเรา</a>
            <a href="/contact" className="text-gray-700 hover:text-blue-600">ติดต่อ</a>
          </div>
          
          <div className="flex items-center gap-4">
            <button className="p-2 hover:bg-gray-100 rounded-lg">
              <Search className="w-5 h-5" />
            </button>
            
            <a href="/cart" className="p-2 hover:bg-gray-100 rounded-lg relative">
              <ShoppingCart className="w-5 h-5" />
              {cartCount > 0 && (
                <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs w-5 h-5 rounded-full flex items-center justify-center">
                  {cartCount > 9 ? '9+' : cartCount}
                </span>
              )}
            </a>
            
            <a href={isLoggedIn ? '/account' : '/login'} className="p-2 hover:bg-gray-100 rounded-lg">
              <User className="w-5 h-5" />
            </a>
          </div>
        </div>
      </div>
      
      {isMenuOpen && (
        <div className="lg:hidden border-t bg-white">
          <nav className="container mx-auto px-4 py-4 space-y-2">
            <a href="/products" className="block py-2 text-gray-700">สินค้า</a>
            <a href="/vendors" className="block py-2 text-gray-700">ร้านค้า</a>
            <a href="/about" className="block py-2 text-gray-700">เกี่ยวกับเรา</a>
            <a href="/contact" className="block py-2 text-gray-700">ติดต่อ</a>
          </nav>
        </div>
      )}
    </header>
  );
}