import { Box, useMediaQuery, useTheme } from "@mui/material";
import Chat from "./Chat/Chat";
import Collapse from "./Collapse";
import TicketList from "./TicketList/TicketList";


export default function Support() {
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));

    return (
        <Box sx={{
            display: "flex",
            width: "100%",
            flexDirection: upMd ? "row" : "column",
            gap: "12px",
        }}>
            {!upMd &&
                <Collapse headerText="Тикеты">
                    <TicketList />
                </Collapse>
            }
            <Chat />
            {upMd && <TicketList />}
        </Box>
    );
}