import * as React from "react";
import { CardProps as OriginalProps } from "@front10/base-elements";
import { IconName } from "@front10/base-elements";

export interface VideoData {
  video: string;
  altText: string | null;
}

export interface ImageData {
  image: string;
  altText: string | null;
}

export interface CardData {
  //Title
  text1?: string;
  //Subtitle
  text2?: string;
  //Description
  text3?: string;
  //Details
  text4?: string | string[];
  //Price
  text5?: string;
  //Date
  text6?: string;
  //Old price
  text7?: string;
  //Rating info
  text8?: string;
  //Video gif url
  text9?: string;
  //Video url
  text10?: string;
  //video reproduction count
  text11?: string;
  link?: string;
  type?: string;
  iconName?: IconName;
  rating?: number;
  image?: string;
  imageAltText?: string;
  forceHoverState?: boolean;
  userVerified?: boolean;
  media?: Object[];
}

export interface SingleCardProps<T extends CardData = CardData>
  extends OriginalProps {
  data: T;
  showText1?: boolean;
  showText2?: boolean;
  showText3?: boolean;
  showText4?: boolean;
  showText5?: boolean;
  showText6?: boolean;
  showText7?: boolean;
  showText8?: boolean;
  showText9?: boolean;
  showText10?: boolean;
  showText11?: boolean;
  showRating?: boolean;
  showCallToAction?: boolean;
  callToActionText?: string;
  imageCover?: React.CSSProperties["objectFit"];
  onCardClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
  onCallToActionClick?: (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ) => void;
  isLoading?: boolean;
}