import Iconify from '@/components/Iconify';
import { Paper, Stack, Typography } from '@mui/material';
import { useState } from 'react';

export default function DiagnosisHistory({ diagnosis }) {
  function DiagnosaItem({ item }) {
    return (
      <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ p: 1 }}>
        <Stack>
          <Typography variant="body2" fontWeight="600">
            Nama Penyakit
          </Typography>
          <Typography variant="body2">Claim Terakhir : 23 Januari 2023 08:00</Typography>
        </Stack>
        <Iconify icon="eva:arrow-ios-forward-fill"></Iconify>
      </Stack>
    );
  }

  return (
    <Paper variant="outlined" sx={{ background: '#f4f6f8', p: 2, marginTop: 2 }}>
      <Stack direction="row" justifyContent="space-between" alignItems="center">
        <Stack direction="row" alignItems="center" spacing={1}>
          <Iconify icon="eva:clock-outline" />
          <Typography variant="body2" fontWeight={600}>
            Riwayat Diagnosa
          </Typography>
        </Stack>
        {/* <Typography
          variant="body2"
          onClick={() => {
            setOpenDialogRequestDocument(true);
          }}
        >
          View All
        </Typography> */}
      </Stack>

      <Paper sx={{ background: 'white', marginTop: 2 }}>
        { diagnosis.length > 0 ? (
          <Stack sx={{ maxHeight: '250px', overflowY: 'scroll' }}>
            { diagnosis.map((diagnosa, index) => (
              <DiagnosaItem item={diagnosa} key={index}></DiagnosaItem>
            )) }
          </Stack>
          ) : (
          <Stack sx={{ p: 1 }}>
            <Typography>Belum ada History Perawatan</Typography>
          </Stack>
        ) }
      </Paper>
    </Paper>
  );
}
