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

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

const useSuccessStep = () => {
  const { close, postPaymentHandler } = useBuyMatchPopupStore()

  const closeAfterPayment = () => {
    postPaymentHandler()
    close()
  }

  return { closeAfterPayment }
}

export const SuccessStep = () => {
  const { closeAfterPayment } = useSuccessStep()

  return (
    <Wrapper width={369}>
      <Header height={24}>
        <HeaderTitle>
          <T9n t='payment' />
        </HeaderTitle>
      </Header>
      <Body marginTop={30}>
        <ResultText>
          <T9n t='success_subscription' />
        </ResultText>
      </Body>
      <Footer>
        <SmallButton onClick={closeAfterPayment}>
          Ок
        </SmallButton>
      </Footer>
    </Wrapper>
  )
}
