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

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

export const SuccessStep = () => {
  const { close } = useBuyMatchPopupStore()

  return (
    <Wrapper width={517}>
      <Header height={50}>
        <HeaderTitle>
          <T9n t='payment' />
        </HeaderTitle>
      </Header>
      <Body marginTop={30} marginBottom={40}>
        <ResultText t='success_subscription' />
      </Body>
      <Footer>
        <Button onClick={close}>
          <T9n t='subscription_done' />
        </Button>
      </Footer>
    </Wrapper>
  )
}
