import classNames from "classnames";
import React from "react";

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

import styles from "./VideoCardThumbnail.module.css";

export const VideoCardThumbnail = ({
  orientation,
  contentVisibility,
  src,
  children,
}: VideoCardThumbnailProps) => {
  const content = <div className={styles.thumbnailContent}>{children}</div>;

  return (
    <div
      className={classNames(
        styles.thumbnail,
        styles[`thumbnail--${orientation}`],
      )}
      style={{ backgroundImage: `url(${src})` }}
    >
      {contentVisibility ? (
        <Visible {...contentVisibility}>{content}</Visible>
      ) : (
        content
      )}
    </div>
  );
};

interface VideoCardThumbnailProps {
  src: string;
  children: React.ReactNode;
  orientation: "portrait" | "landscape";
  contentVisibility?: Omit<VisibleProps, "children">;
}