import React from "react";

import { Visible } from "@arc-ui/components/Visible";
import { Spacing } from "@arc-ui/components/Spacing";

import {
  VideoCardPlayer,
  VideoCardPlayerProps,
  VideoCardThumbnail,
} from "../../internal/VideoCardPlayer";

import {
  VideoHeroCardContent,
  VideoHeroCardContentProps,
} from "./components/VideoHeroCardContent";

export const VideoHeroCard = ({
  content,
  thumbnailImg,
  player,
  ...props
}: VideoHeroCardProps) => {
  return (
    <VideoCardPlayer
      thumbnail={
        <VideoCardThumbnail
          src={thumbnailImg}
          orientation="landscape"
          contentVisibility={{ l: true, xl: true, xxl: true }}
        >
          <VideoHeroCardContent {...content} background="dark" />
        </VideoCardThumbnail>
      }
      orientation="landscape"
      playIconSize="l"
      player={player}
      {...props}
    >
      {content && (
        <Visible xs s m>
          <Spacing all={{ xs: "16", s: "32" }}>
            <VideoHeroCardContent {...content} background="light" />
          </Spacing>
        </Visible>
      )}
    </VideoCardPlayer>
  );
};

export interface VideoHeroCardProps {
  /**
   * Content for the video card.
   */
  content: Omit<VideoHeroCardContentProps, "background">;
  /**
   * Thumbnail for the video hero card.
   */
  thumbnailImg: string;
  /**
   * Configuration for the video player.
   */
  player: VideoCardPlayerProps["player"];
}