mediahub-fe/components/partials/header/locale-switcher.tsx

'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>

    );
}