import Button from "@/components/ui/Button";

export default function SecondaryNav() {
  return (
    <div
      style={{ backgroundColor: "#eceaea" }}
      className="mx-0 flex h-auto min-h-14 items-center gap-2 overflow-x-auto px-4 py-2 sm:mx-6 sm:rounded-xl sm:px-5 lg:mx-16 lg:px-8"
    >

      {/* Left nav buttons */}
      <div className="flex min-w-max items-center gap-2">
        <Button variant="pill" icon={
          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        }>
          All Categories
        </Button>

        <Button variant="pill" icon={
          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M12 2C8.134 2 5 5.134 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" />
          </svg>
        }>
          Track Order
        </Button>

        <Button variant="pill" icon={
          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M3 5a2 2 0 0 1 2-2h3.28a1 1 0 0 1 .95.68l1.1 3.3a1 1 0 0 1-.23 1.02L8.5 9.5a11.05 11.05 0 0 0 6 6l1.5-1.62a1 1 0 0 1 1.02-.23l3.3 1.1a1 1 0 0 1 .68.95V19a2 2 0 0 1-2 2A17 17 0 0 1 3 5z" />
          </svg>
        }>
          Customer Support
        </Button>
      </div>

      {/* Right side */}
      <div className="ml-auto flex min-w-max items-center gap-2">
        <Button variant="teal">Become a Seller</Button>

        <Button variant="icon" aria-label="Wishlist">
          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
          </svg>
        </Button>

        <Button variant="icon" aria-label="Cart">
          <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4zM3 6h18M16 10a4 4 0 0 1-8 0" />
          </svg>
        </Button>
      </div>

    </div>
  );
}
