import Box from "@mui/material/Box";
import { FC } from "react";
import DeleteIcon from "@mui/icons-material/Delete";
import { IconButton, SxProps, Theme } from "@mui/material";

type VideoElementProps = {
  videoSrc: string;
  width?: string;
  theme: Theme;
  onDeleteClick: () => void;
  deleteIconSx?: SxProps<Theme>;
};

export const VideoElement: FC<VideoElementProps> = ({
  videoSrc,
  width = "300",
  theme,
  onDeleteClick,
  deleteIconSx,
}) => {
  return (
    <Box sx={{ position: "relative", width: `${width}px` }}>
      <video
        style={{ borderRadius: "8px" }}
        src={videoSrc}
        width={width}
        controls
      />
      <IconButton
        onClick={onDeleteClick}
        sx={{
          position: "absolute",
          right: 0,
          top: 0,
          color: theme.palette.orange.main,
          borderRadius: "8px",
          borderBottomRightRadius: 0,
          borderTopLeftRadius: 0,
          ...deleteIconSx,
        }}
      >
        <DeleteIcon />
      </IconButton>
    </Box>
  );
};