import { Store, Package, Users, Settings } from 'lucide-react';

interface StoreNavigationProps {
  isLoggedIn?: boolean;
  isVendor?: boolean;
}

export default function StoreNavigation({ isLoggedIn, isVendor }: StoreNavigationProps) {
  const mainLinks = [
    { href: '/', label: 'หน้าแรก', icon: Store },
    { href: '/products', label: 'สินค้าทั้งหมด', icon: Package },
  ];

  const userLinks = isLoggedIn ? [
    { href: '/account', label: 'บัญชีของฉัน', icon: Users },
    { href: '/account/orders', label: 'คำสั่งซื้อ', icon: Package },
  ] : [];

  const vendorLinks = isVendor ? [
    { href: '/vendor/dashboard', label: 'จัดการร้าน', icon: Settings },
    { href: '/vendor/products', label: 'สินค้าของฉัน', icon: Package },
    { href: '/vendor/orders', label: 'คำสั่งซื้อ', icon: Package },
  ] : [];

  return (
    <nav className="bg-white border-b">
      <div className="container mx-auto px-4">
        <div className="flex items-center gap-8">
          {mainLinks.map(link => (
            <a
              key={link.href}
              href={link.href}
              className="flex items-center gap-2 py-4 text-gray-700 hover:text-blue-600 transition-colors"
            >
              <link.icon className="w-4 h-4" />
              {link.label}
            </a>
          ))}
          
          {userLinks.length > 0 && (
            <>
              <span className="text-gray-300">|</span>
              {userLinks.map(link => (
                <a
                  key={link.href}
                  href={link.href}
                  className="flex items-center gap-2 py-4 text-gray-700 hover:text-blue-600 transition-colors"
                >
                  <link.icon className="w-4 h-4" />
                  {link.label}
                </a>
              ))}
            </>
          )}
          
          {vendorLinks.length > 0 && (
            <>
              <span className="text-gray-300">|</span>
              {vendorLinks.map(link => (
                <a
                  key={link.href}
                  href={link.href}
                  className="flex items-center gap-2 py-4 text-blue-600 hover:text-blue-700 transition-colors"
                >
                  <link.icon className="w-4 h-4" />
                  {link.label}
                </a>
              ))}
            </>
          )}
        </div>
      </div>
    </nav>
  );
}