import Link from "next/link";

import IcBaselineWhatsappIcon from "@/components/icons/ic/baseline-whatsapp";
import StreamlineFreehandHelpHeadphonesCustomerSupportHumanIcon from "../icons/streamline-freehand/help-headphones-customer-support-human";

interface HeaderSecondary {
  left: Array<{
    label: string;
    path: string;
  }>;
  right: Array<{
    label: string;
    path: string;
    icon?: React.ReactNode;
  }>;
}

const headerSecondary: HeaderSecondary = {
  left: [
    {
      label: "Pasien & Pengunjung",
      path: "#",
    },
    {
      label: "Perusahaan",
      path: "#",
    },
    {
      label: "AderaMedia",
      path: "#",
    },
  ],
  right: [
    {
      label: "WhatsApp",
      path: "#",
      icon: <IcBaselineWhatsappIcon className="size-5" />,
    },
    {
      label: "Hubungi kami (0274) 2888800",
      path: "#",
      icon: (
        <StreamlineFreehandHelpHeadphonesCustomerSupportHumanIcon className="size-5" />
      ),
    },
  ],
};

const HeaderSecondary = () => {
  return (
    <header className="bg-primary p-3">
      <div className="max-w-7xl mx-auto flex justify-between">
        <div className="flex items-center gap-6">
          {headerSecondary.left.map((item, idx) => (
            <Link
              key={idx}
              href={item.path}
              className="text-primary-foreground font-semibold text-sm hover:underline"
            >
              {item.label}
            </Link>
          ))}
        </div>
        <div className="flex items-center gap-6">
          {headerSecondary.right.map((item, idx) => (
            <Link
              key={idx}
              href={item.path}
              className="text-primary-foreground font-semibold text-sm flex items-center gap-2 hover:underline"
            >
              {item.icon}
              {item.label}
            </Link>
          ))}
        </div>
      </div>
    </header>
  );
};

export default HeaderSecondary;