import styled from 'styled-components/macro'

import { PaymentPeriodTabs } from 'features/PaymentPeriodTabs'

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

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

export const Packages = () => {
  const {
    onPackageSelect,
    onPeriodSelect,
    selectedPackage,
    selectedPeriod,
    selectedSubscription,
    subscriptions,
  } = useBuyMatchPopupStore()

  if (!selectedSubscription) return null

  return (
    <Wrapper>
      <PaymentPeriodTabs
        onPeriodSelect={onPeriodSelect}
        selectedPeriod={selectedPeriod}
        selectedSubscription={selectedSubscription}
      />
      <PackagesList
        packages={subscriptions}
        selectedPackage={selectedPackage}
        onSelect={onPackageSelect}
      />
    </Wrapper>
  )
}
