'use client'
import type { FC } from 'react'
import React from 'react'
import { RiArrowDownSLine } from '@remixicon/react'
import cn from '@/utils/classnames'
import Popover from '@/app/components/base/popover'
import { languages } from '@/i18n/language'

export type ILanguageSelectProps = {
  currentLanguage: string
  onSelect: (language: string) => void
  disabled?: boolean
}

const LanguageSelect: FC<ILanguageSelectProps> = ({
  currentLanguage,
  onSelect,
  disabled,
}) => {
  return (
    <Popover
      manualClose
      trigger='click'
      disabled={disabled}
      htmlContent={
        <div className='w-full py-1'>
          {languages.filter(language => language.supported).map(({ prompt_name }) => (
            <div
              key={prompt_name}
              className='py-2 px-3 mx-1 flex items-center gap-2 hover:bg-gray-100 rounded-lg cursor-pointer text-gray-700 text-sm'
              onClick={() => onSelect(prompt_name)}>{prompt_name}
            </div>
          ))}
        </div>
      }
      btnElement={
        <div className='inline-flex items-center'>
          <span className='pr-[2px] text-xs leading-[18px] font-medium'>{currentLanguage}</span>
          <RiArrowDownSLine className='w-3 h-3 opacity-60' />
        </div>
      }
      btnClassName={open => cn('!border-0 !px-0 !py-0 !bg-inherit !hover:bg-inherit', open ? 'text-blue-600' : 'text-gray-500')}
      className='!w-[120px] h-fit !z-20 !translate-x-0 !left-[-16px]'
    />
  )
}
export default React.memo(LanguageSelect)