// @mui
import { Grid, Card, Typography, Stack } from '@mui/material';
import { styled } from '@mui/material/styles';
// theme
import palette from '../../theme/palette';

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

interface ClaimStatusType {
  name: string;
  value: number;
  color: string;
}

interface PropsCardClaimStatus {
  data?: ClaimStatusType[];
}

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

const RootStyle = styled(Card)(({ theme }) => ({
  boxShadow: 'none',
  padding: theme.spacing(2),
  color: 'black',
  backgroundColor: theme.palette.grey[200],
}));

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

const defaultData = [
  { name: 'Requested', value: 0, color: palette.dark.primary.dark },
  { name: 'Approval', value: 0, color: palette.dark.warning.dark },
  { name: 'Disbrusment', value: 0, color: palette.dark.success.dark },
  { name: 'Rejected', value: 0, color: palette.dark.error.dark },
];

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

export default function CardClaimStatus({ data }: PropsCardClaimStatus) {
  return (
    <RootStyle>
      <Stack sx={{ mb: 1 }}>
        <Typography variant="body2">Claim Status</Typography>
      </Stack>
      <Grid container spacing={2}>
        {data
          ? data.map(({ name, value, color }: ClaimStatusType, key) => (
              <Grid item key={key} xs={6} sm={3}>
                <Card
                  sx={{
                    paddingX: 1,
                    borderRadius: 0.75,
                    borderColor: color,
                    borderStyle: 'solid',
                    borderWidth: '1px',
                    padding: 2,
                    flex: 1,
                    textAlign: 'center',
                  }}
                >
                  <Typography component="p" variant="body2">
                    {name}
                  </Typography>
                  <Typography component="p" variant="h5" sx={{ marginTop: 2 }}>
                    {value}
                  </Typography>
                  <Typography component="p" variant="body2" sx={{ marginTop: 2 }}>
                    Cases
                  </Typography>
                </Card>
              </Grid>
            ))
          : defaultData.map(({ name, value, color }: ClaimStatusType, key) => (
              <Grid item key={key} xs={6} sm={3}>
                <Card
                  sx={{
                    paddingX: 1,
                    borderRadius: 0.75,
                    borderColor: color,
                    borderStyle: 'solid',
                    borderWidth: '1px',
                    padding: 2,
                    flex: 1,
                    textAlign: 'center',
                  }}
                >
                  <Typography component="p" variant="body2">
                    {name}
                  </Typography>
                  <Typography component="p" variant="h5" sx={{ marginTop: 2 }}>
                    {value}
                  </Typography>
                  <Typography component="p" variant="body2" sx={{ marginTop: 2 }}>
                    Cases
                  </Typography>
                </Card>
              </Grid>
            ))}
      </Grid>
    </RootStyle>
  );
}