"use client";
import Image from "next/image";
import { usePathname, useRouter } from "next/navigation";
import { useAuth } from "@/src/hooks/useAuth";
import { useLanguage } from "@/src/hooks/useLanguage";
import { Button } from "@/src/components/commons/Button";
import { ArrowLeft, Users, Key, SignOut } from "@phosphor-icons/react";

export default function Header() {
  const { t } = useLanguage();
  const { user, signOut } = useAuth();
  const router = useRouter();
  const pathname = usePathname();
  const isAdmin = (user as any)?.role === "ADMIN";
  const isOnAdminPage = pathname.startsWith("/admin");

  return (
    <header className="w-full flex items-center justify-between px-6 py-3 bg-white shadow-md">
      <div className="flex items-center gap-3">
        <Image width={70} height={70} src="/icon.png" alt="Logo" />
      </div>
      <div className="flex items-center gap-3">
        {isAdmin && (
          isOnAdminPage ? (
            <Button
              variant="secondary"
              onClick={() => router.back()}
              icons={<ArrowLeft />}
            >
              {t("header.back")}
            </Button>
          ) : (
            <Button
              variant="secondary"
              onClick={() => router.push("/admin")}
              icons={<Users />}
            >
              {t("header.admin")}
            </Button>
          )
        )}
        <Button
          variant="secondary"
          onClick={() => router.push("/change-password")}
          icons={<Key size={20} className="shrink-0" />}
          className="whitespace-nowrap"
        >
          {t("header.change_password")}
        </Button>
        <Button variant="primary" icons={<SignOut size={20} />} onClick={signOut} className="bg-[#D32F2F]">
          {t("header.logout")}
        </Button>
      </div>
    </header>
  );
}