import { FC, useState, Dispatch, SetStateAction } from 'react'
import { Container, Content, Panel, ButtonGroup, Tag, Button, Stack, FlexboxGrid, Col } from 'rsuite'
import MainHeader from '@/components/header'
import CheckOutlineIcon from '@rsuite/icons/CheckOutline';


interface PricingCardProps {
  period: string,
  label: string,
  header: string,
  price: number,
  yearReduction: number,
  isEnable: boolean,
  features: string[],
}

const PricingCard: FC<PricingCardProps> = (props) => {
  const strPeriod = props.period === 'yearly' ? 'year' : 'month'
  return (
    <Panel
      bordered
      style={{
        maxWidth: 350,
        padding: 16,
        margin: 16,
        boxShadow: '3px 3px 0px 0px rgba(0, 0, 0, 0.12)',
      }}
    >
      <Stack direction='column' alignItems='stretch' spacing={16}>

        <h1>{props.label}</h1>
        <h5>{props.header}</h5>

        <Stack alignItems='stretch'>
          <h2>{props.price}</h2>

          <Stack.Item alignSelf='flex-end'>
            <h5>/{strPeriod}</h5>
          </Stack.Item>

          {props.period === 'yearly' && (
            <Stack.Item alignSelf='flex-end' style={{ marginLeft: 8 }}>
              <Tag color="red">- {props.yearReduction} %</Tag>
            </Stack.Item>)
          }
        </Stack>

        <Button appearance='primary' block disabled={!props.isEnable}>Subscribe</Button>

        <h5>{props.label} includes:</h5>

        <Stack direction='column' alignItems='flex-start' spacing={1}>
          {props.features.map((feature, index) => (
            <Stack key={index} spacing={8}>
              <CheckOutlineIcon /><p>{feature}</p>
            </Stack>

          ))}
        </Stack>
      </Stack>
    </Panel>
  )
}


export default PricingCard