import styled from 'styled-components/macro'

import { T9n } from 'features/T9n'
import { PaymentPeriodTabs } from 'features/PaymentPeriodTabs'

import { useBuyMatchPopupStore } from '../../store'
import { SubscriptionsList } from '../SubscriptionsList'

const Wrapper = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
`

const Title = styled.span`
  font-weight: normal;
  font-size: 20px;
  line-height: 21px;
  text-transform: uppercase;
  margin-top: 30px;
  padding: 0 35px;
`

export const Subscriptions = () => {
  const {
    onPeriodSelect,
    onSubscriptionSelect,
    selectedPeriod,
    selectedSubscription,
    subscriptions,
  } = useBuyMatchPopupStore()
  return (
    <Wrapper>
      <PaymentPeriodTabs
        onPeriodSelect={onPeriodSelect}
        selectedPeriod={selectedPeriod}
      />
      <Title>
        <T9n t='choose_subscription' />
      </Title>
      <SubscriptionsList
        subscriptions={subscriptions}
        selectedSubscription={selectedSubscription}
        onSelect={onSubscriptionSelect}
      />
    </Wrapper>
  )
}