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

export const cardColors = [
  "background-primary",
  "background-secondary",
  "background-contrast",
  "background-accent",
  "background-accent1-blog",
  "background-accent2-blog",
  "fill-subtle",
  "fill-accent1",
  "fill-accent2",
  "fill-accent3",
  "fill-accent4",
  "fill-accent5",
] as const;
export type CardColor = (typeof cardColors)[number];

export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Custom background color */
  color?: CardColor;
  noBorder?: boolean;
}

export const CLASS_ROOT = "card";

const Card = React.forwardRef<HTMLDivElement, CardProps>(
  ({ className, color = "background-primary", noBorder, ...other }, ref) => {
    const classes = cx(
      CLASS_ROOT,
      {
        [color]:
          color !== "background-primary" && color !== "background-contrast",
        [`${color} text-inverse`]: color === "background-contrast",
        [`${CLASS_ROOT}--no-border`]: noBorder,
      },
      className,
    );

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

Card.displayName = "Card";

export { Card };