import cx from "classnames";
import React from "react";
import { cardColors } from "./Card";

export type CardSectionColor = (typeof cardColors)[number];

interface CardSectionProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Custom background color */
  color?: CardSectionColor;
  /** Fill available space using flexbox */
  isFilling?: boolean;
  /** Use spacing variant */
  space?: "small" | "large";
}

export const CLASS_ROOT = "card__section";

const CardSection = React.forwardRef<HTMLDivElement, CardSectionProps>(
  ({ className, color, isFilling, space, ...other }, ref) => {
    const classes = cx(
      CLASS_ROOT,
      {
        [String(color)]:
          color &&
          color !== "background-primary" &&
          color !== "background-contrast",
        [`${color} text-inverse`]: color === "background-contrast",
        [`${CLASS_ROOT}--fill`]: isFilling,
        [`${CLASS_ROOT}--space-small`]: space === "small",
        [`${CLASS_ROOT}--space-large`]: space === "large",
      },
      className,
    );

    return <div className={classes} ref={ref} {...other} />;
  },
);

CardSection.displayName = "CardSection";

export { CardSection };