'use client';
import { useParams } from 'next/navigation';
import {useTransition } from 'react';
import { Button } from './Button';
import { usePathname, useRouter } from '@/i18n/navigationd';
import { Locale } from '@/i18n/routing';
import { useLocale } from 'next-intl';


export default function LanguagesButton({

}) {
      const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const pathname = usePathname();
  const params = useParams();

function onSelectChange(e: string) {
    const nextLocale = e as Locale;
    startTransition(() => {
      router.replace(
        // @ts-expect-error -- TypeScript will validate that only known `params`
        // are used in combination with a given `pathname`. Since the two will
        // always match for the current route, we can skip runtime checks.
        {pathname, params},
        {locale: nextLocale}
      );
    });
  }
  const locale = useLocale();

    return (
        <div className='flex items-center gap-5'>
            <Button disabled={isPending} variant={'ghost'} className={`p-0 hover:bg-transparent ${locale === "en" ? "text-foreground" : "text-muted-foreground"}`} onClick={() => onSelectChange("en")}>EN</Button>
            <Button disabled={isPending} variant={'ghost'} className={`p-0 hover:bg-transparent ${locale === "fr" ? "text-foreground" : "text-muted-foreground"}`} onClick={() => onSelectChange("fr")}>FR</Button>
           
        </div>
    );
}