import { useRef } from "react";
import { Box, ButtonBase, Typography } from "@mui/material";
import Iconify from "@/components/Iconify";

type Props = {
    handleChangeInputProp: (event: any) => void
}

export default function FormCreateBtnUpload ({handleChangeInputProp}: Props) {
    const fileInput = useRef<HTMLInputElement>(null);

    return (
        <ButtonBase sx={{ py: 5, border: '2px dashed #F9FAFB',bgcolor: '#919EAB52',borderRadius: '8px',width: '100%', height: '60px'}} onClick={() => fileInput.current?.click()}>
            <Box
                sx={{
                    display: 'flex',
                    placeItems: 'center',
                    gap: 1,
                    placeContent: 'center',
                    py:'11px'
                }}
            >
                <Iconify icon="icon-park-outline:upload-one" fontSize="1.5em" />
                <Typography variant="body1" fontWeight="bold" fontSize={'15px'}>
                    Upload Result
                </Typography>
            </Box>
            <input
                type="file"
                id="file"
                ref={fileInput}
                style={{ display: 'none' }}
                multiple
                onChange={(event) => handleChangeInputProp(event.target.files ? event.target.files[0] : {})}
                accept="application/pdf"
            />
        </ButtonBase>
    )
}
