'use client'

import { Lang } from "@/i18n/locales";
import Link from "next/link";
import { useParams, usePathname } from "next/navigation";
import { Button } from "./button";
import { LanguagesIcon } from "lucide-react";


export const LanguageSelector = () => {
  const params = useParams<{ locale: Lang }>();
  const pathname = usePathname() ?? ''

  const replacements = {
    'pl': 'en',
    'en': 'pl',
  }

  const lang = params?.locale || 'pl';
  const otherLang = replacements[lang];
  const changedLang = pathname.replace(`/${lang}`, `/${otherLang}`)

  return (<>
      <Button
        variant="ghost"
        size="icon"
        className="md:ml-6 w-15"
      >
        <Link
          href={changedLang}
          className="flex space-x-2 items-center"
        >
          <LanguagesIcon className="h-5 w-5 mr-1" />
          <span>{otherLang.toUpperCase()}</span>
        </Link>
      </Button>
  </>);
};