"use client";

import Link from "next/link";
import clsx from "clsx";
import { BackButton } from "@/components/back-button";
import CountryIndicator from "@/components/country-indicator/country-indicator";
import { GenderIndicator } from "@/components/gender-select/gender-indicator";
import { ImageWithFallBack } from "@/components/image";
import { HeaderButtons } from "@/components/header-buttons";
import { HeaderLinks } from "./links";
import MobileSidebar from "./mobile-sidebar";

interface HeaderProps {
  settings?: Record<string, string>;
  borderBottom?: boolean;
  showLinks?: boolean;
  isHidden?: boolean;
  showOnlyBackButton?: boolean;
  showBusinessButton?: boolean;
}

export const Header = ({
  settings,
  showLinks,
  borderBottom = false,
  isHidden = true,
  showOnlyBackButton,
  showBusinessButton = true,
}: HeaderProps) => (
  <header className={clsx(borderBottom && "border-b border-gray-link")}>
    <div className="xl:container px-4 lg:py-7 sm:py-4 py-2.5 flex items-center justify-between ">
      {isHidden && !showOnlyBackButton && <MobileSidebar isHidden={isHidden} />}
      <div className="flex gap-7 items-center">
        {!isHidden && !showOnlyBackButton && <MobileSidebar isHidden={isHidden} />}
        <Link
          href="/"
          className={clsx("relative z-10 lg:z-[4] lg:inline", showOnlyBackButton && "hidden")}
        >
          <ImageWithFallBack
            src={settings?.logo || "/img/banner1.png"}
            alt={settings?.title || "logo"}
            width={148}
            height={28}
            className="object-contain h-7 w-auto"
          />
        </Link>
        <CountryIndicator />
        <GenderIndicator />
        {showOnlyBackButton && (
          <div className="lg:hidden">
            <BackButton />
          </div>
        )}
      </div>
      {showLinks && <HeaderLinks />}
      <HeaderButtons canOpenDrawer={showOnlyBackButton} showBusinessButton={showBusinessButton} />
    </div>
  </header>
);