import { className } from 'lib/css'
import { FC } from 'preact/compat'
import Icon from 'ui/components/layout/icon'

type TranslationOptionProps = {
  label?: string
  checked: boolean
  description?: string
  onChange: () => void
  id?: string
  itemClassName?: string
}

const TranslationOption: FC<TranslationOptionProps> = ({
  label,
  checked,
  description,
  onChange,
  id,
  itemClassName,
}) => {
  const onKeyDown = (e: KeyboardEvent) => {
    if (e.code === 'Space' || e.code === 'Enter') {
      e.preventDefault()
      onChange()
    }
  }

  return (
    <li
      className={className([itemClassName || '', 'translation-options__item'])}
      aria-selected={checked}
      role="option"
      tabIndex={0}
      onClick={onChange}
      onKeyDown={onKeyDown}
      id={id}
    >
      <Icon name="check" size="16" alt="" />
      {label} {description && <span>({description})</span>}
    </li>
  )
}

export default TranslationOption