import {
  useTranslationProposal,
  useTranslationsContainer,
} from 'domains/translations/hooks'
import ChatStatus from 'ui/components/chat-status'
import ChatStatusAction from 'ui/components/chat-status/chat-status-action'

export default function TranslationProposal() {
  const {
    showProposal,
    translationProposal,
    dismissTranslationProposal,
    activateTranslationProposal,
  } = useTranslationProposal()

  const { id } = useTranslationsContainer()

  if (!showProposal || !translationProposal) {
    return null
  }

  return (
    <ChatStatus
      handleClose={dismissTranslationProposal}
      srCloseButtonText={translationProposal.srDismissButtonText}
      id={id}
      title={translationProposal.titleLabel}
    >
      <ChatStatusAction
        handleClick={activateTranslationProposal}
        icon="newTranslation"
        title={translationProposal.buttonLabel}
      />
    </ChatStatus>
  )
}