import { Grid } from '@mui/material';

import PricingPlan, { type PricingPlanProps } from './PricingPlan';
import { styled } from '../Theme';
import { withDeprecated } from '../Util/deprecate';

export interface PricingTableProps {
  plans?: Array<PricingPlanProps['plan']>;
}

function PricingTable({ plans = [] }: PricingTableProps) {
  if (plans && plans.length > 0) {
    return (
      <Div variant="even">
        <Grid
          container
          spacing={2}
          sx={{
            justifyContent: 'center',
          }}>
          {plans.map((x, index) => (
            <Grid
              className="plan-item"
              // eslint-disable-next-line react/no-array-index-key
              key={index}
              size={{
                xs: 12,
                sm: 6,
                md: 3,
              }}>
              <PricingPlan plan={x} />
            </Grid>
          ))}
        </Grid>
      </Div>
    );
  }
  return null;
}

export default withDeprecated(PricingTable, { name: 'PricingTable' });

type DivProps = {
  variant: 'even' | 'odd';
};

const Div = styled('div')<DivProps>`
  padding: 100px 0;
  text-align: center;
  background-color: ${(props) => (props.variant === 'even' ? '#fbfbfb' : '#ffffff')};
  @media (max-width: 320px) {
    padding: 50px 0;
  }
  .plan-item {
    @media (max-width: 320px) {
      margin-bottom: 30px;
    }
  }
`;
