import { gray300, gray700 } from '@/styles/colors';
import styled from '@emotion/styled';
import { MajorButton } from './Buttons';

const PricingCardContainer = styled.div`
  background: black;
  border: 3px solid ${gray700};
  border-radius: 4px;
  text-align: left;
  padding: 0;
  max-width: 400px;

  @media screen and (max-width: 600px) {
    max-width: initial;
    margin: 0 10px;
  }
`;

const PricingCardHeader = styled.div`
  background-color: ${gray300};
  padding: 20px;

  h1 {
    font-size: 2rem;
  }
  p {
    font-size: 1rem;
    margin: 0;
  }
`;
const PricingCardBody = styled.div`
  padding: 20px;
  h1 {
    font-size: 3rem;
    margin-bottom: 10px;
  }
  ul {
    padding-inline-start: 20px;
  }
`;

interface Props extends React.PropsWithChildren {
  tierName: string;
  description: string;
  price: string;
  onCTA: () => void;
}

const PricingCard = ({ tierName, description, price, onCTA, children }: Props) => {
  return (
    <PricingCardContainer>
      <PricingCardHeader>
        <h1>{tierName}</h1>
        <p>{description}</p>
      </PricingCardHeader>
      <PricingCardBody>
        <h1>{price}</h1>
        <MajorButton onClick={onCTA}>Get started</MajorButton>
        {children}
      </PricingCardBody>
    </PricingCardContainer>
  );
};

export default PricingCard;