"use client";
import { useTheme } from "@emotion/react";
import { OndemandVideo } from "@mui/icons-material";
import { Button, IconButton, useMediaQuery } from "@mui/material";

const Learn = () => {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down("sm"));

    const handleClick = () => {
        const link = document.createElement("a");
        link.href = `/v3/learn-road-safety.mp4`;
        link.download = "آموزش بخش نگهداری حریم راه - سامانه جامع راهداری.mp4";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    };

    return (
        <>
            {isMobile ? (
                <IconButton aria-label="آموزش" color="warning" onClick={handleClick}>
                    <OndemandVideo sx={{ fontSize: "25px" }} />
                </IconButton>
            ) : (
                <Button
                    size={"small"}
                    variant="outlined"
                    color="warning"
                    startIcon={<OndemandVideo />}
                    onClick={handleClick}
                >
                    آموزش
                </Button>
            )}
        </>
    );
};
export default Learn;