// @mui
import { styled } from '@mui/material/styles';
import { Button, Card, Divider, Link, Typography, Stack } from '@mui/material';
import { ChevronRight } from '@mui/icons-material';
// components
import Iconify from '@/components/Iconify';

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

const RootStyle = styled(Card)(({ theme }) => ({
  boxShadow: 'none',
  padding: '1rem 0.5rem',
  color: 'black',
  backgroundColor: theme.palette.grey[200],
  maxHeight: '250px',
}));

const ItemStyle = styled(Card)(({ theme }) => ({
  boxShadow: 'none',
  padding: theme.spacing(1),
  borderRadius: 0.5,
  color: 'black',
  height: '180px',
}));

const itemList = [
  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '08:00 WIB' },
  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '09:00 WIB' },
  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '10:00 WIB' },
  { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '11:00 WIB' },
];

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

export default function NotificationCard() {
  return (
    <RootStyle>
      <Stack direction="row" justifyContent="space-between" alignItems="center">
        <Typography>
          <Typography
            variant="body2"
            component="span"
            sx={{ display: 'flex', alignItems: 'center' }}
          >
            <Iconify icon="eva:bell-fill" marginRight={0.75} />
            Notification
            <div
              style={{
                width: '12px',
                height: '12px',
                backgroundColor: '#19BBBB',
                marginLeft: '0.5rem',
                borderRadius: '50%',
              }}
            />
          </Typography>
        </Typography>
        <Button sx={{ typography: 'body2' }} endIcon={<ChevronRight />}>
          View All
        </Button>
      </Stack>

      <Stack sx={{ marginTop: 2 }}>
        <ItemStyle>
          {itemList.map(({ info, date, time }, key) => (
            <div key={key}>
              {key >= 1 ? <Divider sx={{ marginY: 0.5 }} /> : ''}
              <Stack direction="row" justifyContent="space-between" alignItems="center">
                <Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
                  <Typography sx={{ typography: 'caption' }}>{info}</Typography>
                  <Link
                    component="button"
                    variant="caption"
                    underline="always"
                    onClick={() => {
                      alert('Info Detail');
                    }}
                  >
                    Info Detail
                  </Link>
                </Stack>
                <Stack direction="column" justifyContent="flex-start" alignItems="flex-start">
                  <Typography sx={{ typography: 'caption', color: '#656565' }}>{date}</Typography>
                  <Typography sx={{ typography: 'caption', color: '#656565' }}>{time}</Typography>
                </Stack>
              </Stack>
            </div>
          ))}
        </ItemStyle>
      </Stack>

      {/* <BorderLinearProgress variant="determinate" value={50} sx={{ mb: 1 }} />

      <Stack sx={{ backgroundColor: '#B2E8E8', paddingY: 1, paddingX: 1.5, mb: 2 }}>
        <Typography sx={{ typography: 'caption' }}>Lock Fund ( 25% )</Typography>
        <Typography sx={{ typography: 'caption' }}>125.000.000 / 125.000.000</Typography>
      </Stack>

      <Stack direction="row" spacing={2}>
        <Button variant="outlined" fullWidth={true}>
          Submit Claim
        </Button>
        <Button variant="contained" startIcon={<Payments />} fullWidth={true}>
          Top Up
        </Button>
      </Stack> */}
    </RootStyle>
  );
}