import React from "react";
import cn from "classnames";
import PropTypes from "prop-types";
import ICardContent from "./card-content.d";

interface ICardImg extends ICardContent {
  alt: string;
  src?: string;
  variant?: "top" | "bottom" | "overlay";
}

const CardImg: React.FC<ICardImg> = ({ className, children, variant, alt, ...props }) => {
  const dataTestId = props["data-testid"] || "honey-ui-card-img";
  return (
    <img
      {...props}
      data-testid={dataTestId}
      alt={alt}
      className={cn("card-img", { [`card-image-${variant}`]: variant }, className)}
    >
      {children}
    </img>
  );
};

CardImg.displayName = "Card Img";
CardImg.propTypes = {
  alt: PropTypes.string.isRequired,
  className: PropTypes.string,
  children: PropTypes.string,
  src: PropTypes.string,
  variant: PropTypes.oneOf(["top", "bottom", "overlay"])
};

export default CardImg;