"use client";

import Link from "next/link";
import { ShoppingCart, Heart, Package, Menu, User, ChevronDown } from "lucide-react";
import { SearchBar } from "./SearchBar";

export function Header() {
  return (
    <header className="sticky top-0 z-50 bg-white border-b border-gray-100">
      <div className="container mx-auto px-4 lg:px-8">
        <div className="flex items-center justify-between h-20 gap-4">
          
          {/* Logo & Menu (Mobile) */}
          <div className="flex items-center gap-4">
            <button className="lg:hidden p-2 -ml-2 text-gray-600 hover:bg-gray-50 rounded-lg">
              <Menu className="w-6 h-6" />
            </button>
            <Link href="/" className="flex items-center gap-2">
              <div className="w-8 h-8 bg-violet-600 rounded-lg flex items-center justify-center">
                <ShoppingBagIcon className="w-5 h-5 text-white" />
              </div>
              <span className="text-xl font-bold text-gray-900 hidden sm:block">Marketplace</span>
            </Link>
          </div>

          {/* Search Bar (Desktop) */}
          <div className="hidden lg:flex flex-1 max-w-2xl mx-8">
            <SearchBar />
          </div>

          {/* Actions */}
          <div className="flex items-center gap-1 sm:gap-4">
            <Link href="/favoritos" className="hidden sm:flex items-center gap-2 p-2 text-gray-600 hover:text-violet-600 hover:bg-violet-50 rounded-lg transition-colors">
              <Heart className="w-5 h-5" />
              <span className="text-sm font-medium">Favoritos</span>
            </Link>
            <Link href="/pedidos" className="hidden sm:flex items-center gap-2 p-2 text-gray-600 hover:text-violet-600 hover:bg-violet-50 rounded-lg transition-colors">
              <Package className="w-5 h-5" />
              <span className="text-sm font-medium">Pedidos</span>
            </Link>
            
            <div className="h-6 w-px bg-gray-200 hidden sm:block mx-2"></div>

            <Link href="/carrinho" className="relative p-2 text-gray-600 hover:text-violet-600 transition-colors">
              <ShoppingCart className="w-6 h-6" />
              <span className="absolute top-0 right-0 w-5 h-5 bg-violet-600 text-white text-[10px] font-bold flex items-center justify-center rounded-full border-2 border-white">
                3
              </span>
            </Link>

            <button className="p-1 rounded-full border-2 border-transparent hover:border-violet-200 transition-all">
              <div className="w-9 h-9 bg-gray-100 rounded-full flex items-center justify-center overflow-hidden">
                <User className="w-5 h-5 text-gray-400" />
                {/* <img src="/placeholder-user.jpg" alt="User" className="w-full h-full object-cover" /> */}
              </div>
            </button>
          </div>

        </div>

        {/* Search Bar (Mobile) */}
        <div className="lg:hidden pb-4">
          <SearchBar mobile />
        </div>

      </div>
    </header>
  );
}

function ShoppingBagIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" />
      <path d="M3 6h18" />
      <path d="M16 10a4 4 0 0 1-8 0" />
    </svg>
  )
}