// mui
import { styled } from '@mui/material/styles';
import {
  Card,
  Typography,
  Stack,
  LinearProgress,
  linearProgressClasses,
  Grid,
} from '@mui/material';

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

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() {
  return (
    <div style={{ marginTop: '1rem' }}>
      <Typography padding={1} variant="subtitle2">
        Benefit Summary
      </Typography>
      <Card>
        <Grid container spacing={1} marginTop={1} sx={{ backgroundColor: '#F4F6F8', padding: 1 }}>
          {/* Card 1 */}
          <Grid item xs={12} sm={6} md={6} lg={4}>
            <Card sx={{ padding: 1 }}>
              <Stack spacing={1}>
                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
                  Rawat Jalan
                </Typography>
                <Typography variant="body2" color="#0A0A0A">
                  Yearly Limits
                </Typography>
                <BorderLinearProgress variant="determinate" value={100} />
                <Stack direction="row" spacing={0.25}>
                  <Typography variant="body2">10.000.000</Typography>
                  <Typography>/</Typography>
                  <Typography variant="body2" color="#757575">
                    10.000.000
                  </Typography>
                </Stack>
              </Stack>
            </Card>
          </Grid>
          {/* Card 2 */}
          <Grid item xs={12} sm={6} md={6} lg={4}>
            <Card sx={{ padding: 1 }}>
              <Stack spacing={1}>
                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
                  Rawat Inap
                </Typography>
                <Typography variant="body2" color="#0A0A0A">
                  Yearly Limits
                </Typography>
                <BorderLinearProgress variant="determinate" value={100} />
                <Stack direction="row" spacing={0.25}>
                  <Typography variant="body2">10.000.000</Typography>
                  <Typography>/</Typography>
                  <Typography variant="body2" color="#757575">
                    10.000.000
                  </Typography>
                </Stack>
              </Stack>
            </Card>
          </Grid>
          {/* Card 3 */}
          <Grid item xs={12} sm={6} md={6} lg={4}>
            <Card sx={{ padding: 1 }}>
              <Stack spacing={1}>
                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
                  Manfaat Special
                </Typography>
                <Typography variant="body2" color="#0A0A0A">
                  Yearly Limits
                </Typography>
                <BorderLinearProgress variant="determinate" value={100} />
                <Stack direction="row" spacing={0.25}>
                  <Typography variant="body2">10.000.000</Typography>
                  <Typography>/</Typography>
                  <Typography variant="body2" color="#757575">
                    10.000.000
                  </Typography>
                </Stack>
              </Stack>
            </Card>
          </Grid>
          {/* Card 4 */}
          <Grid item xs={12} sm={6} md={6} lg={4}>
            <Card sx={{ padding: 1 }}>
              <Stack spacing={1}>
                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
                  Manfaat Special
                </Typography>
                <Typography variant="body2" color="#0A0A0A">
                  Yearly Limits
                </Typography>
                <BorderLinearProgress variant="determinate" value={100} />
                <Stack direction="row" spacing={0.25}>
                  <Typography variant="body2">10.000.000</Typography>
                  <Typography>/</Typography>
                  <Typography variant="body2" color="#757575">
                    10.000.000
                  </Typography>
                </Stack>
              </Stack>
            </Card>
          </Grid>
          {/* Card 5 */}
          <Grid item xs={12} sm={6} md={6} lg={4}>
            <Card sx={{ padding: 1 }}>
              <Stack spacing={1}>
                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
                  Perobatan Mata
                </Typography>
                <Typography variant="body2" color="#0A0A0A">
                  Yearly Limits
                </Typography>
                <BorderLinearProgress variant="determinate" value={100} />
                <Stack direction="row" spacing={0.25}>
                  <Typography variant="body2">10.000.000</Typography>
                  <Typography>/</Typography>
                  <Typography variant="body2" color="#757575">
                    10.000.000
                  </Typography>
                </Stack>
              </Stack>
            </Card>
          </Grid>
          {/* Card 6 */}
          <Grid item xs={12} sm={6} md={6} lg={4}>
            <Card sx={{ padding: 1 }}>
              <Stack spacing={1}>
                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
                  Perawatan Gigi
                </Typography>
                <Typography variant="body2" color="#0A0A0A">
                  Yearly Limits
                </Typography>
                <BorderLinearProgress variant="determinate" value={100} />
                <Stack direction="row" spacing={0.25}>
                  <Typography variant="body2">10.000.000</Typography>
                  <Typography>/</Typography>
                  <Typography variant="body2" color="#757575">
                    10.000.000
                  </Typography>
                </Stack>
              </Stack>
            </Card>
          </Grid>
          {/* Card 7 */}
          <Grid item xs={12} sm={6} md={6} lg={4}>
            <Card sx={{ padding: 1 }}>
              <Stack spacing={1}>
                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
                  Kehamilan
                </Typography>
                <Typography variant="body2" color="#0A0A0A">
                  Yearly Limits
                </Typography>
                <BorderLinearProgress variant="determinate" value={100} />
                <Stack direction="row" spacing={0.25}>
                  <Typography variant="body2">10.000.000</Typography>
                  <Typography>/</Typography>
                  <Typography variant="body2" color="#757575">
                    10.000.000
                  </Typography>
                </Stack>
              </Stack>
            </Card>
          </Grid>
          {/* Card 8 */}
          <Grid item xs={12} sm={6} md={6} lg={4}>
            <Card sx={{ padding: 1 }}>
              <Stack spacing={1}>
                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
                  Laboratorium
                </Typography>
                <Typography variant="body2" color="#0A0A0A">
                  Yearly Limits
                </Typography>
                <BorderLinearProgress variant="determinate" value={100} />
                <Stack direction="row" spacing={0.25}>
                  <Typography variant="body2">10.000.000</Typography>
                  <Typography>/</Typography>
                  <Typography variant="body2" color="#757575">
                    10.000.000
                  </Typography>
                </Stack>
              </Stack>
            </Card>
          </Grid>
          {/* Card 9 */}
          <Grid item xs={12} sm={6} md={6} lg={4}>
            <Card sx={{ padding: 1 }}>
              <Stack spacing={1}>
                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
                  Manfaat Farmasi
                </Typography>
                <Typography variant="body2" color="#0A0A0A">
                  Yearly Limits
                </Typography>
                <BorderLinearProgress variant="determinate" value={100} />
                <Stack direction="row" spacing={0.25}>
                  <Typography variant="body2">10.000.000</Typography>
                  <Typography>/</Typography>
                  <Typography variant="body2" color="#757575">
                    10.000.000
                  </Typography>
                </Stack>
              </Stack>
            </Card>
          </Grid>
        </Grid>
      </Card>
    </div>
  );
}