"use client";

import { ArrowLeft, Headphones } from "lucide-react";
import LanguageSwitcher from "@/components/language-switcher";
import { useTenant } from "@/components/tenant-provider";

type PortalHeaderProps = {
  label: string;
  action?: { label: string; href: string };
};

export default function PortalHeader({ label, action }: PortalHeaderProps) {
  const { tenant } = useTenant();
  const initial = tenant.brandName.charAt(0).toUpperCase();
  return (
    <header className="border-b border-slate-200 bg-white">
      <div className="mx-auto flex h-[72px] max-w-7xl items-center gap-4 px-4 sm:px-7">
        <a href="/" className="flex shrink-0 items-center gap-2.5" aria-label={`${tenant.brandName} home`}>
          {tenant.logoUrl ? (
            <img src={tenant.logoUrl} alt={tenant.brandName} className="h-10 max-w-36 object-contain" />
          ) : (
            <><span className="grid h-9 w-9 -rotate-3 place-items-center rounded-xl bg-[var(--brand)] text-xl font-black italic text-white shadow-md">{initial}</span><span className="text-xl font-black tracking-[-0.04em] text-[var(--brand)]">{tenant.brandName}</span></>
          )}
        </a>
        <span className="hidden h-7 w-px bg-slate-200 sm:block" />
        <span className="hidden text-sm font-bold text-slate-500 sm:block">{label}</span>
        <nav className="ml-auto hidden items-center gap-4 text-xs font-bold text-slate-600 xl:flex">
          <a href="/track" className="hover:text-[var(--brand)]">Track</a>
          <a href="/seller" className="hover:text-[var(--brand)]">Seller</a>
          <a href="/affiliate" className="hover:text-[var(--brand)]">Affiliate</a>
          <a href="/delivery" className="hover:text-[var(--brand)]">Delivery</a>
          <a href="/admin" className="hover:text-[var(--brand)]">Admin</a>
          <a href="/enterprise" className="rounded-lg bg-blue-50 px-2 py-1.5 text-[var(--brand)] hover:bg-blue-100">Enterprise</a>
        </nav>
        <div className="ml-auto hidden md:block xl:ml-0"><LanguageSwitcher compact /></div>
        {action ? (
          <a href={action.href} className="rounded-xl bg-[var(--brand)] px-4 py-2.5 text-xs font-black text-white">{action.label}</a>
        ) : (
          <a href={`mailto:${tenant.supportEmail}`} className="flex items-center gap-2 rounded-xl border border-slate-200 px-3 py-2 text-xs font-bold text-slate-600"><Headphones size={16} /> <span className="hidden sm:inline">Get help</span></a>
        )}
        <a href="/" className="grid h-9 w-9 place-items-center rounded-full bg-slate-100 text-slate-600 md:hidden" aria-label="Back to store"><ArrowLeft size={17} /></a>
      </div>
    </header>
  );
}