"use client";
import { useTranslation } from "@/hooks/useTranslation";

export default function LanguageToggle() {
    const { toggleLanguage, language } = useTranslation();
    const flag = language === "id" ? "/assets/Flags/INA.png" : "/assets/Flags/UK.png"
    const flagHover =
        language === "en"
            ? "hover:!bg-[url('/assets/Flags/INA.png')]"
            : "hover:!bg-[url('/assets/Flags/UK.png')]";

    return (
        <button
            onClick={toggleLanguage}
            style={{
                backgroundImage: `url(${flag})`,
            }}
            className={`
        relative
        w-15
        h-7.5
        rounded-full
        bg-cover
        bg-center
        transition-all
        duration-300
        overflow-hidden
        cursor-pointer
        ${flagHover}
      `}
            aria-label="Toggle language"
        >
            <span
                className={`
          absolute
          top-1/2
          -translate-y-1/2
          w-6
          h-6
          bg-white
          rounded-full
          shadow
          flex
          items-center
          justify-center
          transition-transform
          duration-300
          ${language === "en" ? "translate-x-7.5" : "translate-x-0.5"}
        `}
            >
            </span>
        </button>
    );
}