"use client";

import React from "react";
import { useRouter, usePathname } from "next/navigation";
import Cookies from "js-cookie";
import { useLocale, useTranslations } from "next-intl";
import { FaGlobe } from "react-icons/fa";
import ArFlag from "@/assets/flags/ar.svg";
import EnFlag from "@/assets/flags/en.svg";
import KuFlag from "@/assets/flags/ku.svg";
import Image from "next/image";

interface LangSwitcherProps {
  isProfile?: boolean;
}

const LangSwitcher: React.FC<LangSwitcherProps> = ({ isProfile = false }) => {
  const locale = useLocale();
  const router = useRouter();
  const pathname = usePathname();
  const t = useTranslations();

  const availableLangs = ["ar", "en", "ku"];

  const setLanguage = (lang: string) => {
    Cookies.set("NEXT_LOCALE", lang);
    const newPath = pathname.replace(/^\/(ar|en|ku)/, `/${lang}`);
    router.push(newPath);
  };

  const getFlag = (lang: string) => {
    switch (lang) {
      case "ar":
        return ArFlag.src;
      case "en":
        return EnFlag.src;
      case "ku":
        return KuFlag.src;
      default:
        return EnFlag.src;
    }
  };

  if (isProfile) {
    return (
      <div className="flex items-center gap-2">
        {availableLangs.map((lang) => (
          <button
            key={lang}
            onClick={() => setLanguage(lang)}
            className={`flex items-center gap-2 font-semibold uppercase text-base ${
              locale === lang ? "underline" : ""
            }`}
          >
            <Image
              src={getFlag(lang)}
              width={100}
              height={100}
              className="w-8 h-6"
              alt={`flag_${lang}`}
            />
            {t(`locale.${lang}_text`)}
          </button>
        ))}
      </div>
    );
  }

  return (
    <div className="flex items-center gap-2 font-semibold uppercase">
      <FaGlobe />
      <select
        className="bg-transparent outline-none"
        value={locale}
        onChange={(e) => setLanguage(e.target.value)}
      >
        {availableLangs.map((lang) => (
          <option key={lang} value={lang}>
            {t(`locale.${lang}`)}
          </option>
        ))}
      </select>
    </div>
  );
};

export default LangSwitcher;