"use client";

import * as React from "react";
import { GlobeIcon } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/shared/ui/dropdown-menu";
import { Button } from "@/shared/ui/button";
import { languages } from "../lib/data";
import { useParams, usePathname } from "next/navigation";
import { useRouter } from "next/navigation";
import { LanguageRoutes } from "@/shared/config/i18n/types";

export function ChangeLang() {
  const { locale } = useParams();
  const pathname = usePathname()
  const router = useRouter()

  const changeLocale = (locale: LanguageRoutes) => {
    const segments = pathname.split('/');
    segments[1] = locale;
    const newPath = segments.join('/');
    router.push(newPath);
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" className={"py-0 px-0 text-center "}>
          <GlobeIcon/>
          <span>{languages.find((e) => e.key == locale)?.name}</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        {languages.map((e, i) => (
          <DropdownMenuItem key={i} onClick={() => changeLocale(e.key)}>
            {e.name}
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
