import {Box, Button, Drawer} from "@mui/material";
import {CalendarToday as CalendarIcon} from "@mui/icons-material";
import React from "react";
import CalendarDrawerContent from "./CalendarDrawerContent";

const MobileCalendarStageList = ({isMobile, openDrawer, setOpenDrawer, filteredStages, viewDate}) => {
    if (!isMobile || filteredStages.length === 0) {
        return null;
    }
    return (
        <>
            {/* Drawer для мобильных */}
            <Drawer
                anchor="bottom"
                open={openDrawer}
                onClose={() => setOpenDrawer(false)}
                PaperProps={{sx: {borderRadius: '16px 16px 0 0'}}}
            >
                <CalendarDrawerContent filteredStages={filteredStages} viewDate={viewDate}/>
            </Drawer>

            {/* Кнопка для открытия drawer на мобильных */}
            <Box sx={{position: 'fixed', bottom: 80, right: 24}}>
                <Button
                    variant="contained"
                    color="primary"
                    size="large"
                    onClick={() => setOpenDrawer(true)}
                    startIcon={<CalendarIcon/>}
                    sx={{
                        boxShadow: 3,
                        '&:hover': {boxShadow: 4},
                        borderRadius: 24,
                    }}
                >
                    Посмотреть этапы
                </Button>
            </Box>
        </>
    )
}

export default MobileCalendarStageList;