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

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

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 CardPolicyNumber() {
  return (
    <Card sx={{ padding: 2 }}>
      <Stack>
        <Stack direction="row" alignItems="center" spacing={1} justifyContent="space-between">
          <Stack direction="row" spacing={1} alignItems="center">
            <img width={52} height={52} src="/logo/logo-linksehat.png" alt="LinkSehat" />
            <Stack spacing={1}>
              <Typography variant="subtitle2">Policy Number</Typography>
              <Typography variant="subtitle2">12345678910</Typography>
            </Stack>
          </Stack>
          <Stack spacing={1} sx={{ width: '206.5px' }}>
            <Typography variant="subtitle2">Yearly Limit</Typography>
            <BorderLinearProgress variant="determinate" value={100} />
            <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
              10.000.000 /{' '}
              <Typography variant="body2" color="#757575" component="span">
                10.000.000
              </Typography>
            </Typography>
          </Stack>
        </Stack>
        {/* Benefit Summary */}
        <CardBenefitSummary />
      </Stack>
    </Card>
  );
}
