import Image from 'next/image';
import { Input } from '@/components/ui/input';
import { Bell, Heart, ShoppingCart, SquarePen } from 'lucide-react';
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';

function MarketplaceNavbar() {
  return (
    <nav className="w-full bg-[#010313]">
      <div className="container-main h-[56px] flex items-center justify-between">
        {/* Logo and Brand */}
        <div className="flex items-center gap-2 min-w-[180px]">
          <Image src="/marketplacelogo.png" alt="Woedii Logo" width={40} height={40} className="object-contain" />
          <span className="text-white text-2xl ml-1 font-normal">Wodey</span>
        </div>
        {/* Search Bar */}
        <div className="flex-1 flex justify-center">
          <div className="flex items-center bg-[#F2F4F8] rounded-[8px] px-4" style={{ width: 400, height: 40, gap: 8 }}>
            <svg className="text-[#6B7280] mr-2" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="8.5" cy="8.5" r="5.75"/><path d="M16 16l-3.5-3.5"/></svg>
            <Input
              type="text"
              placeholder="Search images, videos, fonts, graphics and more"
              className="bg-transparent text-[#6B7280] text-base w-full border-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-full"
              style={{ height: 40 }}
            />
          </div>
        </div>
        {/* Right Side Icons and Profile */}
        <div className="flex items-center gap-8 min-w-[420px] justify-end">
          {/* Notifications */}
          <div className="relative cursor-pointer flex flex-col items-center justify-center">
            <div className="relative flex items-center justify-center">
              <Bell size={22} className="text-white" />
              <span className="absolute -top-1 -right-1 w-[9px] h-[9px] bg-[#FF3B30] rounded-full border-[1.5px] border-[#020316]" />
            </div>
            <span className="text-xs text-white mt-1">Notifications</span>
          </div>
          {/* Favorites */}
          <div className="cursor-pointer flex flex-col items-center justify-center">
            <Heart size={22} className="text-white" />
            <span className="text-xs text-white mt-1">Favorites</span>
          </div>
          {/* Cart */}
          <div className="cursor-pointer flex flex-col items-center justify-center">
            <ShoppingCart size={22} className="text-white" />
            <span className="text-xs text-white mt-1">Cart</span>
          </div>
          {/* Profile */}
          <div className="cursor-pointer flex flex-col items-center justify-center">
            <div className="flex items-center justify-center">
              <Avatar className="w-6 h-6">
                <AvatarImage src="/avatar.png" alt="Profile" />
                <AvatarFallback>U</AvatarFallback>
              </Avatar>
            </div>
            <span className="text-xs text-white mt-1">My Profile</span>
          </div>
          {/* Create Button */}
          <a href="/creator">
          <Button className="flex items-center gap-2 bg-[#0093A5] text-white px-5 py-2 rounded-lg font-medium text-base transition-colors ml-4 hover:bg-[#007a87] cursor-pointer" type="button">
            <SquarePen size={18} />
            Create
          </Button>
          </a>
        </div>
      </div>
    </nav>
  );
}

function MarketplaceSecondaryMenu() {
  return (
    <div className="w-full bg-[#010313] border-t border-white/20">
      <div className="container-main flex items-center h-7 p-5">
        <ul className="flex gap-10 text-white text-sm font-normal">
          <li className="cursor-pointer">Images</li>
          <li className="cursor-pointer">Videos</li>
          <li className="cursor-pointer">Audios</li>
          <li className="cursor-pointer">Gifs</li>
          <li className="cursor-pointer">Fonts</li>
        </ul>
      </div>
    </div>
  );
}

export default function MarketplaceNavbarWithMenu() {
  return (
    <>
      <MarketplaceNavbar />
      <MarketplaceSecondaryMenu />
    </>
  );
}