import cx from "classnames";
import React from "react";

interface CardProductHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  image?: React.ReactNode;
  /** Use small spacing */
  space?: "small";
}

export const CLASS_ROOT = "card__product";

const CardProductHeader = React.forwardRef<
  HTMLDivElement,
  CardProductHeaderProps
>(({ className, children, image, space, ...other }, ref) => {
  const classes = cx(
    `${CLASS_ROOT}-header`,
    {
      [`${CLASS_ROOT}-header--space-small`]: space === "small",
    },
    className,
  );

  const contentClasses = `${CLASS_ROOT}-content`;

  return (
    <div className={classes} ref={ref} {...other}>
      <div className={contentClasses}>{children}</div>
      {image}
    </div>
  );
});

CardProductHeader.displayName = "CardProductHeader";

export { CardProductHeader };