import React from "react";
import { Link, NavLink } from "react-router-dom";
import { ShoppingBag, Search } from "lucide-react";

const navLink = ({ isActive }) =>
  "text-sm transition " + (isActive ? "text-neutral-900" : "text-neutral-600 hover:text-neutral-900");

export default function SiteHeader() {
  return (
    <header className="sticky top-0 z-40 border-b border-neutral-200/70 bg-white/80 backdrop-blur">
      <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
        <Link to="/" className="text-base font-semibold tracking-tight">
          iStore
        </Link>

        <nav className="hidden items-center gap-6 md:flex">
          <NavLink to="/store" className={navLink}>
            Store
          </NavLink>
          <a
            className="text-sm text-neutral-600 hover:text-neutral-900"
            href="https://www.apple.com/"
            target="_blank"
            rel="noreferrer"
            title="Official Apple site"
          >
            Official site
          </a>
        </nav>

        <div className="flex items-center gap-3 text-neutral-700">
          <button className="rounded-full p-2 hover:bg-neutral-100" aria-label="Search (demo)">
            <Search size={18} />
          </button>
          <button className="rounded-full p-2 hover:bg-neutral-100" aria-label="Bag (demo)">
            <ShoppingBag size={18} />
          </button>
        </div>
      </div>
    </header>
  );
}