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 CardFile({requestLog} : CardDetail ) {
    return (
        <Card sx={{padding:2}}  >
            <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
                <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
                <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Files History</Typography>
                {requestLog?.files?.map((documentType, index) => (
                    <Stack direction="column" spacing={2} key={index}>
                        <Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
                        <a
                            href={documentType.url}
                            style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
                            target="_blank"
                        >
                            <Typography variant="body2" gutterBottom>{documentType.original_name ? documentType.original_name : '-'}</Typography>
                        </a>
                        </Stack>
                    </Stack>
                ))}
            </Stack>
            </Stack>
        </Card>
    )
   
}