import { Flex, Heading, List, ListIcon, ListItem, Text, useColorModeValue, VStack, } from '@chakra-ui/react' import * as React from 'react' import { CheckIcon } from '../../../assets/icons/CheckIcon' import { Card, CardProps } from './Card' export interface PricingCardData { features: string[] name: string price: string } interface PricingCardProps extends CardProps { data: PricingCardData icon?: JSX.Element button: React.ReactElement } export const PricingCard = (props: PricingCardProps) => { const { data, icon, button, ...rest } = props const { features, price, name } = data const accentColor = useColorModeValue('blue.500', 'white') return ( {icon} {name} {price} {(price.includes('$') || price.includes('€')) && ( / month )} {features.map((feature, index) => ( {feature} ))} {button} ) }