import { Card, Button, CardContent, Typography } from '@mui/material';

import { styled } from '../Theme';

export interface PricingPlanProps {
  plan: {
    name: string;
    price: string;
    featureList: string[];
    showButton: boolean;
    buttonLink: string;
    buttonText: string;
  };
}

function PricingPlan({ plan }: PricingPlanProps) {
  return (
    <PlanCard $shadow>
      <div className="card-header">
        <div className="title">{plan.name}</div>
      </div>
      <CardContent className="card-content">
        <div className="plan-content">
          <div className="plan-pricing">
            <Typography component="h2" variant="h5" className="price-number">
              {plan.price}
            </Typography>
          </div>
          <div className="plan-services">
            {plan.featureList.map((line) => (
              <Typography component="p" variant="body1" align="center" key={line}>
                {line}
              </Typography>
            ))}
          </div>
        </div>
        <div className="plan-actions">
          {plan.showButton && (
            <Button fullWidth variant="outlined" color="primary" component="a" href={plan.buttonLink}>
              {plan.buttonText}
            </Button>
          )}
        </div>
      </CardContent>
    </PlanCard>
  );
}

export default PricingPlan;

type PlanCardProps = {
  $shadow?: boolean;
};

const PlanCard = styled(Card)<PlanCardProps>`
  height: 500px;
  display: flex;
  flex-direction: column;
  @media (max-width: 320px) {
    margin-top: 20px;
  }

  && {
    ${(props) => (props.$shadow ? '' : 'box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1)')}
  }

  .card-header {
    height: 80px;
    background-color: #f1fbfb;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    .title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      color: #404040;
      margin: 0;
    }
  }

  .card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
  }

  .plan-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    .plan-pricing {
      display: flex;
      justify-content: center;
      align-items: baseline;
      margin-bottom: 12px;
      color: #4e6af6;
      text-align: center;
    }

    .price-number {
      font-size: 30px;
      font-weight: 600;
      color: #4e6af6;
    }

    .plan-services strong {
      color: #4e6af6;
      font-weight: 500;
    }
  }

  .plan-actions {
    width: 100%;
  }
`;
