'use client';

import { useLocale } from '@/layouts/Providers/IntlProvider';
import { Select } from 'radix-ui';
import React from 'react';
import Image from 'next/image';
import IconFont from '@/components/ui/iconFont';

const options = [
  {
    icon: '/locale/cn.svg',
    value: 'zh',
  },
  {
    icon: '/locale/en.svg',
    value: 'en',
  },
];

const LocaleSelect = React.memo(() => {
  const { locale, setLocale } = useLocale();
  const currentOption = options.find((option) => option.value === locale)!;

  return (
    <Select.Root value={locale} onValueChange={setLocale}>
      <Select.Trigger className="outline-none focus:outline-none">
        <div className="flex h-9 w-14 cursor-pointer items-center justify-between rounded-full bg-white/10 px-2.5">
          <Image
            src={currentOption?.icon}
            alt={currentOption?.value}
            width={20}
            height={20}
          />
          <span className="text-white/80">
            <IconFont className="rotate-90" type="icon-youjiantou" size={10} />
          </span>
        </div>
      </Select.Trigger>
      <Select.Portal>
        <Select.Content
          position="popper"
          side="bottom"
          className="rounded-[10px] bg-neutral-900 p-1 outline-none"
          align="start"
          sideOffset={3}
          style={{
            width: 'var(--radix-select-trigger-width)',
          }}
        >
          {options.map((option) => (
            <Select.Item
              key={option.value}
              value={option.value}
              className="outline-none focus:outline-none"
            >
              <div className="flex h-7 justify-center rounded-[10px] hover:bg-white/10">
                <Image
                  src={option.icon}
                  alt={option.value}
                  width={20}
                  height={20}
                />
              </div>
            </Select.Item>
          ))}
        </Select.Content>
      </Select.Portal>
    </Select.Root>
  );
});

export default LocaleSelect;
