// mui
import { styled } from '@mui/material/styles';
import {
  Card,
  Typography,
  Stack,
  LinearProgress,
  linearProgressClasses,
  Grid,
} from '@mui/material';
import { useEffect, useState } from 'react';
import { description } from '../../../../../dashboard/src/_mock/text';

// ----------------------------------------------------------------------

const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
  height: 10,
  borderRadius: 6,
  [`&.${linearProgressClasses.colorPrimary}`]: {
    backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
  },
  [`& .${linearProgressClasses.bar}`]: {
    borderRadius: 6,
    background: 'linear-gradient(270deg, #19BBBB 38.42%, #FF9565 76.21%, #FE7253 104.02%)',
  },
}));

// ----------------------------------------------------------------------

export default function CardBenefitSummary({ data }) {
  const [benefits, setBenefits] = useState([]);
//  console.log('data', data);
  useEffect(() => {
    setBenefits(data);
  }, [data]);

  return (
    <div style={{ marginTop: '1rem' }}>
      <Typography padding={1} variant="subtitle2">
        Benefit Summary
      </Typography>
      <Card>
        {/* {Object.entries(benefits?.data).map(([key, value]) => (
          <div key={key}>
            <span>Haloo</span>
          </div>
        ))} */}

        <Grid container spacing={1} marginTop={1} sx={{ backgroundColor: '#F4F6F8', padding: 1 }}>
          {/* Card 1 */}
          {benefits?.map((item, key) => (
            <Grid item xs={12} sm={6} md={6} lg={4} key={key}>
              <Card sx={{ padding: 1 }}>
                <Stack spacing={1}>
                  <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
                    {item?.description}
                  </Typography>
                  <Typography variant="body2" color="#0A0A0A">
                    Yearly Limits
                  </Typography>
                  <BorderLinearProgress variant="determinate" value={0} />
                  <Stack direction="row" spacing={0.25}>
                    <Typography variant="body2">0</Typography>
                    <Typography>/</Typography>
                    <Typography variant="body2" color="#757575">
                      {item?.pivot['limit_amount']}
                    </Typography>
                  </Stack>
                </Stack>
              </Card>
            </Grid>
          ))}
        </Grid>
      </Card>
    </div>
  );
}
