import React from "react";

import { Heading } from "@arc-ui/components/Heading";
import { Surface } from "@arc-ui/components/Surface";
import { VerticalSpace } from "@arc-ui/components/VerticalSpace";

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

export const VideoPortraitCard = ({
  thumbnail,
  player,
  ...props
}: VideoPortraitCardProps) => {
  return (
    <VideoCardPlayer
      thumbnail={
        thumbnail && (
          <VideoCardThumbnail orientation="portrait" src={thumbnail.img}>
            <Surface isTransparent background="dark-black">
              <Heading fontStyle="overline">{thumbnail.label}</Heading>
              <VerticalSpace size="8" />
              <Heading level="3" isWordWrap={false} size="xs">
                {thumbnail.title}
              </Heading>
            </Surface>
          </VideoCardThumbnail>
        )
      }
      orientation="portrait"
      player={player}
      playIconSize="s"
      {...props}
    />
  );
};

export interface VideoPortraitCardProps {
  /**
   * Thumbnail content, video will autoplay if omitted.
   */
  thumbnail?: {
    title: string;
    label: string;
    img: string;
  };
  /**
   * Configuration for the video player.
   */
  player: VideoCardPlayerProps["player"];
}