import { AspectImage, Box, Link, Skeleton } from "@front10/base-elements";
import * as React from "react";
import { SingleCardProps } from "../..";
import { YouTubeIcon } from "../../images/YouTubeIcon";
import { CenterOverlay } from "./CenterOverlay";

interface Props {
  showPlayIcon?: boolean;
  showTime?: boolean;
  time?: string;
  url?: string;
  alt?: string;
  image?: string;
  objectFit?: SingleCardProps["imageCover"];
  isLoading?: boolean;
}

export function YouTubeVidePreview(props: Props) {
  return (
    <Skeleton variant="rectangular" disabled={!props.isLoading}>
      <Link href={props.url} target="_blank">
        {props.showPlayIcon && (
          <CenterOverlay>
            <YouTubeIcon />
          </CenterOverlay>
        )}
        {props.showTime ? (
          <Box
            sx={{
              bg: "rgba(34, 34, 34, 0.81)",
              color: "rgb(255, 255, 255)",
              position: "absolute",
              display: "block",
              padding: "5px 7px 6px",
              lineHeight: "1",
              fontSize: "12px",
              right: "4px",
              bottom: "4px",
              zIndex: "1",
            }}
          >
            {props.time}
          </Box>
        ) : null}

        <AspectImage
          ratio={16 / 9}
          alt={props.alt}
          src={props.image}
          className="fr-card-image wx-card-image"
          sx={{
            objectFit: props.objectFit,
            height: "100%",
            width: "100%",
            backgroundSize: "cover",
            backgroundColor: "#000",
          }}
        />
      </Link>
    </Skeleton>
  );
}