'use client';

import React, { useEffect, useState } from 'react';
import Link from 'next/link';
import { LiveSearch } from '../components/store/LiveSearch';
import { HeaderActions } from './HeaderActions';

/** Shared sticky threshold for Header + Navbar so they lock together. */
export const STOREFRONT_STICKY_SCROLL_Y = 10;

/** White gap between the sticky header and nav after scroll. */
export const STOREFRONT_STICKY_NAV_GAP_PX = 10;

export const Header: React.FC = () => {
  const [isSticky, setIsSticky] = useState(false);

  useEffect(() => {
    const onScroll = () =>
      setIsSticky(window.scrollY > STOREFRONT_STICKY_SCROLL_Y);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header
      data-storefront-header
      className={`bg-white z-[110] border-b border-gray-100 transition-shadow duration-200 ${
        isSticky
          ? 'fixed top-0 left-0 right-0 shadow-md py-2.5'
          : 'relative pt-6 pb-4 shadow-2xs'
      }`}
    >
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-5 relative">
        <Link
          href="/"
          className="flex items-center select-none tracking-tighter hover:opacity-95 transition-opacity"
        >
          <span className="text-[#0073EC] text-[38px] font-black leading-none">
            iFix
          </span>
          <span className="text-gray-900 text-[38px] font-black leading-none">
            Kart
          </span>
        </Link>

        <div className="hidden lg:block flex-grow max-w-[660px] mx-2 xl:mx-6 relative z-50">
          <LiveSearch />
        </div>

        <HeaderActions />
      </div>
    </header>
  );
};