"use client";

import { useLanguage } from "@/src/hooks/useLanguage";
import Image from "next/image";

export const LanguageSelector = () => {
  const { currentLanguage, setLanguage, availableLanguages } = useLanguage();

  return (
    <div className="flex flex-wrap justify-center items-center gap-2 my-4">
      {availableLanguages.map((language) => {
        const isActive = currentLanguage === language.code;

        return (
          <button
            key={language.code}
            onClick={() => setLanguage(language.code)}
            className={`
              flex items-center px-3 py-2 rounded border transition-all shadow-sm gap-2 cursor-pointer
              ${
                isActive
                  ? "border-[#006f36] bg-[#006f36d2]"
                  : "border-[#e9e9e9] bg-white hover:border-[#006f36] hover:bg-gray-50"
              }
            `}
          >
            <Image
              src={`/${language.flag}.svg`}
              alt={`${language.name} flag`}
              width={24}
              height={16}
              className="rounded-xs"
            />
            <span
              className={`
                text-base font-medium
                ${isActive ? "text-white font-bold" : "text-[#555555]"}
              `}
            >
              {language.name}
            </span>
          </button>
        );
      })}
    </div>
  );
};