import styled from 'styled-components/macro'

import { PaymentPeriodTabs } from 'features/PaymentPeriodTabs'

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

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

export const Subscriptions = () => {
  const {
    matchSubscriptions,
    onPeriodSelect,
    onSubscriptionSelect,
    selectedPeriod,
    selectedSubscription,
    subscriptions,
  } = useBuyMatchPopupStore()

  return (
    <Wrapper>
      <PaymentPeriodTabs
        onPeriodSelect={onPeriodSelect}
        selectedPeriod={selectedPeriod}
        matchSubscriptions={matchSubscriptions}
      />
      <SubscriptionsList
        subscriptions={subscriptions}
        selectedSubscription={selectedSubscription}
        onSelect={onSubscriptionSelect}
      />
    </Wrapper>
  )
}
