import { SubscriptionType } from 'requests'

import { SubscriptionsBySport } from '../SubscriptionsBySport'
import {
  Modal,
  PaymentPeriodTabs,
  Header,
  ButtonsWrapper,
  SaveButton,
  CancelButton,
} from './styled'

type Props = {
  close: () => void,
  isOpen: boolean,
}

export const SubscriptionModal = ({
  close,
  isOpen,
}: Props) => (
  <Modal
    isOpen={isOpen}
    close={close}
    withCloseButton={false}
  >
    <Header t='select_subscription' />
    <PaymentPeriodTabs
      onPeriodSelect={() => {}}
      selectedPeriod={SubscriptionType.Month}
    />
    <SubscriptionsBySport />

    <ButtonsWrapper>
      <CancelButton onClick={close}>Отменить</CancelButton>
      <SaveButton onClick={close}>Сохранить</SaveButton>
    </ButtonsWrapper>
  </Modal>
)