import { Box, useContainerSize } from "@front10/base-elements";
import * as React from "react";
import { VideoData } from "../CardProps";
import { TwitterVideoPlayback } from "./TwitterVideoPlayback";
import { TwitterImage } from "./TwitterImages";

interface Props {
  video: VideoData;
}

export function TwitterVideo(props: Props) {
  const ref = React.useRef(null);
  const width = useContainerSize(ref);
  // Twitter recommends a 16:9 aspect ratio for tweet images.
  // We are using the same for videos, though tweets with video
  // show previews in portrait mode. This is because we then
  // need to lay-out these cards in grids and carousels and we
  // don't want one of the cards taking considerably more vertical
  // space than the others.
  const height = width * 0.5625;

  return (
    <Box ref={ref} sx={{ height, position: "relative" }}>
      <TwitterImage
        image={props.video.video}
        altText={props.video.altText ?? "Video"}
        width={width}
        height={height}
        placeholder={false}
      />
      <TwitterVideoPlayback />
    </Box>
  );
}