import { styled, Button } from "@mui/material";
import useCollapseDrawer from "@/hooks/useCollapseDrawer";

/**
 * Custom Style
 * ============================================
*/
const DivCustom1 = styled('div')(({ theme }) => ({
    background: 'white',
    position: 'fixed',
    left: '350px',
    right: 0,
    bottom: 0,
    paddingLeft: '32px',
    paddingRight: '32px',
    paddingTop: '32px',
    paddingBottom: '48px',
    [theme.breakpoints.between('sm', 'lg')]: {
        left: '0px',
    },
}));

type Props = {
    disabled: boolean,
    title   : string,
    handleClickProp: () => void
}

export default function FormCreateBtnChoose ({disabled, title, handleClickProp}: Props) {
    const { collapseClick } = useCollapseDrawer();

    return (
        <DivCustom1 sx={{ left: collapseClick ? '80px' : '350px' }}>
            <Button variant="contained" color="primary" disabled={disabled} sx={{ width: '100%', p: '11px' }} onClick={handleClickProp}>
                {title}
            </Button>
        </DivCustom1>
    )
}
