"use client";

import { useLocale } from "next-intl";
import { useParams } from "next/navigation";
import { locales } from "@/config";
import { usePathname, useRouter } from "@/i18n/routing";

import { useTransition } from "react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import Image from "next/image";

export default function LocalSwitcher() {
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
  const pathname = usePathname();
  const params = useParams();
  const localActive = useLocale();

  const onSelectChange = (nextLocale: string) => {
    startTransition(() => {
      router.replace(pathname, { locale: nextLocale });
    });
  };
  return (
    <Select onValueChange={onSelectChange} defaultValue={localActive}>
      <SelectTrigger className="w-[94px] border-none read-only:bg-transparent">
        <SelectValue placeholder="Select a language" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="en" className="border-none">
          <div className="flex items-center gap-1">
            <Image src="/images/all-img/flag-1.png" alt="flag" width={24} height={24} className="w-6 h-6 rounded-full" />
            <span className="font-medium text-sm text-default-600 dark:text-default-700">En</span>
          </div>
        </SelectItem>
        <SelectItem value="in" className="border-none">
          <div className="flex items-center gap-1">
            <Image src="/images/all-img/flag-3.png" alt="flag" width={24} height={24} className="w-6 h-6 rounded-full" />
            <span className="font-medium text-sm text-default-600 dark:text-default-700">In</span>
          </div>
        </SelectItem>
        {/* <SelectItem value="ar">
                    <div className='flex items-center gap-1'>
                        <Image
                            src="/images/all-img/flag-2.png"
                            alt='flag'
                            width={24}
                            height={24}
                            className='w-6 h-6 rounded-full'
                        />
                        <span className='font-medium text-sm text-default-600 dark:text-default-700'>Ar</span>
                    </div>
                </SelectItem> */}
      </SelectContent>
    </Select>
  );
}