import { useI18n } from 'domains/i18n/hooks'
import TranslationOptions from 'domains/translations/components/options-dialog/translation-options'
import OptionsFrame from 'ui/components/options/options-frame'
import type { FramePosition } from 'ui/components/options/options-frame'
import { useGeneratedId } from 'ui/hooks/seamly-hooks'

type TranslationsOptionsDialogProps = {
  onClose: () => void
  position: FramePosition
}

function TranslationsOptionsDialog({
  onClose,
  position,
}: TranslationsOptionsDialogProps) {
  const { t } = useI18n()
  const descriptionId = useGeneratedId()
  return (
    <OptionsFrame
      onCancel={onClose}
      headingText={t('translations.menu.title')}
      cancelButtonText={t('translations.settings.cancelButtonText')}
      description={t('translations.menu.description')}
      descriptionId={descriptionId}
      position={position}
      disableButtonFocusing
    >
      <TranslationOptions describedById={descriptionId} onChange={onClose} />
    </OptionsFrame>
  )
}

export default TranslationsOptionsDialog