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 h-[56px] bg-[#010313] flex items-center px-20 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">Woedii</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>
    </nav>
  );
}

function MarketplaceSecondaryMenu() {
  return (
    <div className="w-full bg-[#010313] flex items-center px-20 h-7 border-t border-white/20 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>
  );
}

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