import cx from "classnames";
import type { ReactElement } from "react";
import React from "react";

import {
  CLASS_IMAGE,
  CLASS_SLIDE,
  CLASS_SLIDE_CONTENT,
  CLASS_TITLE,
} from "./constants";

const CLASS_ROOT = CLASS_SLIDE;

interface CarouselPromotionsItemProps {
  className?: string;
  href?: string;
  image?: ReactElement;
  subtitle?: string;
  title?: string;
  color?: "black";
  [key: string]: any;
}

const CarouselPromotionsItem: React.FC<CarouselPromotionsItemProps> = ({
  className,
  href,
  image,
  title,
  subtitle,
  color,
  ...other
}) => {
  const classes = cx(
    CLASS_ROOT,
    { [`${CLASS_ROOT}--black`]: color === "black" },
    className,
  );

  const Tag = href ? "a" : "div";

  return (
    <Tag className={classes} {...other} href={href ? href : undefined}>
      <div className={CLASS_IMAGE}>{image}</div>
      <div className={CLASS_SLIDE_CONTENT}>
        <h3 className={CLASS_TITLE}>{title}</h3>
        <p>{subtitle}</p>
      </div>
    </Tag>
  );
};

CarouselPromotionsItem.displayName = "CarouselPromotionsItem";

export { CarouselPromotionsItem };