commerce/components/ui/locale-switcher/locale-switcher.tsx

'use client';

import LanguageIcon from 'components/icons/language';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger
} from 'components/ui/dropdown/dropdown';
import { useLocale } from 'next-intl';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useState } from 'react';
import { supportedLanguages } from '../../../i18n-config';

// interface LocaleSwitcherProps {
// localeData: {
//   type: string;
//   locale: string;
//   translations: [];
// };
// }

export default function LocaleSwitcher() {
  const pathName = usePathname();
  const currentLocale = useLocale();

  // const translations = localeData.translations;

  const redirectedPathName = (locale: string) => {
    if (!pathName) return '/';

    // if (translations.length > 0) {
    //   const translation = translations.find((obj) => {
    //     return obj['locale'] === locale;
    //   });

    //   if (translation) {
    //     const url = `/${translation['locale']}${translation['slug']}`;

    //     return url;
    //   }
    // }

    return `/${locale}`;
  };

  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <DropdownMenu open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>
        <DropdownMenuTrigger asChild>
          <button
            className={
              'flex shrink-0 items-center justify-center space-x-1 rounded bg-app p-2 text-xs font-semibold uppercase outline-none ring-2 ring-transparent transition duration-200 hover:ring-ui-border focus:ring-ui-border'
            }
            aria-label="Language selector"
          >
            <LanguageIcon className="h-6 w-6" />
            <span>{currentLocale}</span>
          </button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="drop-shadow-xl">
          <ul className="">
            {supportedLanguages.locales.map((locale) => {
              if (currentLocale === locale.id) {
                return;
              } else {
                return (
                  <li className="" key={locale.id}>
                    <Link
                      className="flex w-full cursor-pointer px-4 py-2 text-sm"
                      href={redirectedPathName(locale.id)}
                    >
                      {locale.title}
                    </Link>
                  </li>
                );
              }
            })}
          </ul>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}