import { Box, Grid, Stack, Switch, Typography } from '@mui/material'
import React from 'react'
import PlanCard from './PlanCard'
import { useCustomTheme } from '@/themes/useCustomTheme'
import { Pricing } from '@/data/pricing'
import Link from 'next/link'

export default function PlanContainer() {
  const [costFrequency, setCostFrequency] = React.useState(true)
  const theme = useCustomTheme()
  return (
    <Box
      sx={{
        px: theme.customProperties.sectionPaddingX,
        minHeight: '100vh'
      }}
    >
      <Stack spacing={2} alignItems='center' sx={{mt: '50px'}}>
        <Typography variant='h2' textAlign='center'>Pricing that works for you</Typography>
        <Stack direction='row' spacing={1} justifyContent={'center'} alignItems={'center'}>
          <Typography>Weekly</Typography>
          <Switch 
            onChange={() => setCostFrequency(!costFrequency)}
          />
          <Typography>Monthly</Typography>
        </Stack>
        <Stack 
          spacing={2}
          direction={ {xs: 'column', md: 'row'}}
          alignItems={'center'}
          justifyContent={'center'}
        >
          {Pricing.map((item, index) => (
            <PlanCard key={index} plan={item} frequency={costFrequency} />
          ))}
        </Stack>
        <Box display={'flex'}>
          <Typography>
            After something else?&nbsp;
          </Typography>
          <Link href='/programs'>
            <Typography sx={{textDecoration: 'underline'}}>
              Try our programs
            </Typography>
          </Link>
        </Box>
      </Stack>
    </Box>
  )
}