"use client";
import { Header as ZezoOttHeader } from "@zezosoft/zezo-ott-react-ui-kit";
import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { useMutation } from "@tanstack/react-query";
import toast from "react-hot-toast";
import { zezoClient } from "@/lib/zezoClient";
 
interface HeaderProps {
  settings: IWebSetting | null;
  categories: IGetCategoriesData[] | null;
  whoami: IWhoami | null;
}
 
const Header: React.FC<HeaderProps> = ({
  categories = [],
  settings,
  whoami,
}) => {
  const router = useRouter();
  const [search, setSearch] = useState("");
 
  const logoutMutation = useMutation({
    mutationFn: zezoClient().auth.logout,
    onSuccess: () => router.push("/"),
    onError: () => toast.error("Logout failed"),
  });
 
  return (
    <ZezoOttHeader
      logo={{
        src: settings?.logo || "https://default-logo.png",
        alt: "Zezo OTT",
        href: "/",
        linkComponent: Link,
      }}
      menu={{
        menu: categories,
        menuShowLimit: 4,
      }}
      search={{
        value: search,
        onChange: (e) => {
          setSearch(e.target.value);
          router.replace(`/search?q=${encodeURIComponent(e.target.value)}`);
        },
      }}
      profile={{ href: "/phone-login" }}
      user={whoami}
      onLogout={() => logoutMutation.mutate()}
    />
  );
};
 
export default Header;