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

export const modalBodyColors = [
  "background-primary",
  "background-secondary",
  "background-contrast",
  "background-accent",
  "background-accent1-blog",
  "background-accent2-blog",
  "surface-primary",
  "surface-secondary",
  "surface-tertiary",
  "surface-subtle",
  "surface-moderate",
  "surface-contrast",
  "surface-accent",
  "fill-subtle",
  "fill-accent1",
  "fill-accent2",
  "fill-accent3",
  "fill-accent4",
  "fill-accent5",
] as const;

export type ModalBodyColor = (typeof modalBodyColors)[number];

interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
  color?: ModalBodyColor;
  className?: string;
  children?: React.ReactNode;
  withTopPadding?: boolean;
  disableSpacing?: boolean;
}

const CLASS_ROOT = "modal__body";

const ModalBody: React.FC<ModalBodyProps> = ({
  color,
  className,
  children,
  withTopPadding,
  disableSpacing,
  ...other
}) => (
  <div
    className={cx(CLASS_ROOT, className, {
      ...(color && color !== "background-contrast" ? { [color]: true } : {}),
      ...(color === "background-contrast"
        ? { [`${color} text-inverse`]: true }
        : {}),
      [`${CLASS_ROOT}--colorful`]: color,
      [`${CLASS_ROOT}--with-top-padding`]: withTopPadding,
      [`${CLASS_ROOT}--no-spacing`]: disableSpacing,
    })}
    {...other}
  >
    {children}
  </div>
);

ModalBody.displayName = "ModalBody";

export { ModalBody };