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

interface ModalProductHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  image?: React.ReactNode;
  /** Use small spacing */
  space?: "small";
  /** Optional id for accessibility (e.g., for aria-labelledby) */
  titleId?: string;
}

export const CLASS_ROOT = "modal__product";

const ModalProductHeader = React.forwardRef<
  HTMLDivElement,
  ModalProductHeaderProps
>(({ className, children, image, space, titleId, ...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} id={titleId}>
        {children}
      </div>
      {image}
    </div>
  );
});

ModalProductHeader.displayName = "ModalProductHeader";

export { ModalProductHeader };