import { Card, Typography } from "@mui/material";
import { Stack } from '@mui/material';
import { DetailFinalLogType } from "../FinalLog/Model/Types";
import { fDate, fDateTimesecond, toTitleCase } from "@/utils/formatTime";


type CardDetail = {
    requestLog: DetailFinalLogType|undefined; 
}

const style1 = {
    color: '#919EAB',
    width: '30%'
}
const style2 = {
    width: '70%'
}
const marginBottom1 = {
    marginBottom: 1,
}
const marginBottom2 = {
    marginBottom: 2,
}


export default function CardDetail({requestLog} : CardDetail ) {
    return (
        <Card sx={{padding:2}}  >
            <Typography variant='subtitle1' sx={{color: '#19BBBB', marginBottom: 4}} gutterBottom>Detail</Typography>
            <Stack direction='row' spacing={2} sx={marginBottom1}>
                <Typography variant='subtitle2' sx={style1} gutterBottom>Provider</Typography>
                <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.provider}</Typography>
            </Stack>
            <Stack direction='row' spacing={2} sx={marginBottom1}>
                <Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
                <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.member_id}</Typography>
            </Stack>
            <Stack direction='row' spacing={2} sx={marginBottom1}>
                <Typography variant='subtitle2' sx={style1} gutterBottom>Policy Number</Typography>
                <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.policy_number}</Typography>
            </Stack>
            <Stack direction='row' spacing={2} sx={marginBottom1}>
                <Typography variant='subtitle2' sx={style1} gutterBottom>Name</Typography>
                <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.name}</Typography>
            </Stack>
            <Stack direction='row' spacing={2} sx={marginBottom1}>
                <Typography variant='subtitle2' sx={style1} gutterBottom>Date Of Birth</Typography>
                <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.date_of_birth ? fDate(requestLog?.date_of_birth) : '-'}</Typography>
            </Stack>
            <Stack direction='row' spacing={2} sx={marginBottom1}>
                <Typography variant='subtitle2' sx={style1} gutterBottom>Marital Status</Typography>
                <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.marital_status}</Typography>
            </Stack>
            <Stack direction='row' spacing={2} sx={marginBottom1}>
                <Typography variant='subtitle2' sx={style1} gutterBottom>Submission Date</Typography>
                <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
            </Stack>

            <Stack direction='row' spacing={2} sx={marginBottom1}>
                <Typography variant='subtitle2' sx={style1} gutterBottom>No KTP</Typography>
                <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.no_identitas ? requestLog?.no_identitas : '-'}</Typography>
            </Stack>
            <Stack direction='row' spacing={2} sx={marginBottom1}>
                <Typography variant='subtitle2' sx={style1} gutterBottom>Keterangan</Typography>
                <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.keterangan ? requestLog?.keterangan : '-'}</Typography>
            </Stack>
            <Stack direction='row' spacing={2} sx={marginBottom1}>
                <Typography variant='subtitle2' sx={style1} gutterBottom>Hak Kamar Pasien</Typography>
                <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.hak_kamar_pasien ? requestLog?.hak_kamar_pasien : '-'}</Typography>
            </Stack>
            <Stack direction='row' spacing={2} sx={marginBottom1}>
                <Typography variant='subtitle2' sx={style1} gutterBottom>Penempatan Kamar</Typography>
                <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.penempatan_kamar ? requestLog?.penempatan_kamar : '-'}</Typography>
            </Stack>
            <Stack direction='row' spacing={2} sx={marginBottom1}>
                <Typography variant='subtitle2' sx={style1} gutterBottom>Catatan</Typography>
                <Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.catatan ? requestLog?.catatan : '-'}</Typography>
            </Stack>
        </Card>
    )
   
}