import { type PropsWithChildren } from 'react';

import Stack, { type StackProps } from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import { TASK_VIDEO_MAX_HEIGHT } from '../../constants';

type MediaContainerProps = PropsWithChildren<StackProps>;

const MediaContainer = ({ children, ...stackProps }: MediaContainerProps) => {
  const theme = useTheme();

  return (
    <Stack
      {...stackProps}
      sx={{
        '& video, img, .YoutubeVideo-root': {
          borderRadius: theme.shape.borderRadiusL,
        },
        '& .YoutubeVideo-root': {
          minHeight: TASK_VIDEO_MAX_HEIGHT,
        },
        ...stackProps.sx,
      }}
    >
      {children}
    </Stack>
  );
};

export default MediaContainer;