import { Typography, Box } from "@mui/material";
import { motion } from "framer-motion";
import { SPACING } from "../data/spacing";
import useUserProfile from "../features/authentication/hooks/useUserProfile";

const Training = () => {
  const [roles] = useUserProfile();

  return (
    <Box
      sx={{
        backgroundColor: "#f9f9f9",
        p: 3,
        borderRadius: "20px",
        m: 8,
      }}
    >
      <Typography
        variant="h5"
        component={motion.div}
        initial={{ scale: 0.8 }}
        animate={{ scale: 1 }}
        transition={{ duration: 0.3 }}
      >
        آموزش
      </Typography>

      {roles.includes("KillHouse") && (
        <Box
          display="flex"
          flexDirection="column"
          alignItems="center"
          mt={SPACING.SMALL}
          p={SPACING.SMALL}
          gap={SPACING.SMALL}
          component={motion.div}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.5, delay: 0.3 }}
        >
          <motion.video
            controls
            controlsList="nodownload"
            width="600"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.5 }}
          >
            <source
              src={"https://miran.storage.c2.liara.space/1.mp4"}
              type="video/mp4"
            />
            Your browser does not support the video tag.
          </motion.video>
        </Box>
      )}
    </Box>
  );
};

export default Training;
