import { Box, Button, Card, Divider, Stack, Typography } from '@mui/material'
import React from 'react'
import CheckIcon from '@mui/icons-material/Check';
import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
import Link from 'next/link';

interface Plan {
  title: string;
  stripeId: string;
  currency: string;
  price: {
    dual: boolean
    weekly: string
    monthly: string
  },
  trial: {
    boolean: boolean
    type: string
  },
  features: string[],
  button: string
}

interface PlanCardProps {
  plan: Plan;
  frequency: boolean;
}

export default function PlanCard({plan, frequency}: PlanCardProps) {
  return (
    <Card
      sx={{
        padding: { xs: '18px 16px',md: '38px 31px'},
        width: '400px',
        maxWidth: '95%',
        height: '100%',
      }}
    >
      <Stack height='100%' justifyContent='space-between' spacing={2}>
        <Stack spacing={2}>
          <Typography variant='h3' textAlign='center'>{plan.title.toUpperCase()}</Typography>
          <Stack direction='row' justifyContent='center' alignItems='stretch'>
            <AttachMoneyIcon fontSize='large' />
            <Typography variant='h6'>{plan.price.dual ? frequency ? plan.price.weekly : plan.price.monthly : plan.price.monthly}</Typography>
          </Stack>
          <Divider />
          <Stack spacing={1}>
            {plan.features.map((item, index) => (
              <Stack direction='row' key={index}>
                <CheckIcon />
                <Typography>{item}</Typography>
              </Stack>
            ))}
          </Stack>
        </Stack>
        <Link href={`/signup?plan=${plan.stripeId}`}>
          <Button variant='contained' >{plan.button}</Button>
        </Link>
      </Stack>
    </Card>
  )
}