import { T9n } from 'features/T9n'
import { Header, HeaderTitle } from 'features/PopupComponents'

import {
  Wrapper,
  Body,
  Footer,
  ResultText,
  SmallButton,
} from '../../styled'
import { useBuyMatchPopupStore } from '../../store'

export const ErrorStep = () => {
  const {
    close,
    error: paymentError,
  } = useBuyMatchPopupStore()

  return (
    <Wrapper height={278} width={369}>
      <Header height={24}>
        <HeaderTitle>
          <T9n t='payment' />
        </HeaderTitle>
      </Header>
      <Body marginTop={30} marginBottom={40}>
        <ResultText>
          {paymentError || <T9n t='error_payment_unsuccessful' />}
        </ResultText>
      </Body>
      <Footer>
        <SmallButton onClick={close}>
          Ок
        </SmallButton>
      </Footer>
    </Wrapper>
  )
}
