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

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

export const CLASS_ROOT = "modal__product";

const ModalProductFooter = React.forwardRef<
  HTMLDivElement,
  ModalProductFooterProps
>(({ className, children, button, image, space, ...other }, ref) => {
  const classes = cx(
    `${CLASS_ROOT}-footer`,
    // {
    //   [`${CLASS_ROOT}-footer--space-small`]: space === "small",
    // },
    className,
  );

  const contentClasses = `${CLASS_ROOT}-footer-content`;
  const buttonClasses = `${CLASS_ROOT}-footer-button`;

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

ModalProductFooter.displayName = "ModalProductFooter";

export { ModalProductFooter };