// components/website/WebsiteHeader.tsx
"use client";

import React, { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";

const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;

interface HeaderData {
  headerLogo?: string;
  title?: string;
}

interface WebsiteHeaderProps {
  headerData?: HeaderData;
}

export const WebsiteHeader = ({ headerData }: WebsiteHeaderProps) => {
  const [isSticky, setIsSticky] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsSticky(window.scrollY > 20);
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <div
      className={`w-full py-0.5 bg-white shadow sm:px-5 md:px-10 lg:px-5 2xl:px-0 px-5 ${
        isSticky ? "fixed top-0 left-0 w-full shadow-sm z-50" : ""
      }`}
    >
      <div className="w-full md:w-2xl lg:w-5xl mx-auto flex justify-between">
        <Link href="/" className="flex items-center w-24 justify-center">
          <Image
            width={500}
            height={500}
            priority
            quality={80}
            src={`${BASE_URL}/${headerData?.headerLogo}`}
            alt={headerData?.title || "Logo"}
            className="w-full"
          />
        </Link>
        <div className="flex gap-5 items-center">
          <div className="flex gap-5 items-center">
            <Link href="/login" className="text-[14px] font-semibold leading-[24px] text-black">
              Login
            </Link>
            <Link
              href="/sign-up"
              className="bg-[#006b84] hover:bg-[#005f70] text-[14px] font-semibold leading-[24px] text-white px-3 py-0.5 rounded-2xl flex items-center justify-center transition-colors duration-300"
            >
              Sign Up
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
};