import cx from "classnames";
import type { HTMLAttributes, ReactNode } from "react";
import React from "react";

const CLASS_ROOT = "pill";

export const pillColors = [
  "surface-primary",
  "surface-secondary",
  "surface-tertiary",
  "surface-subtle",
  "surface-moderate",
  "surface-contrast",
  "surface-accent",
  "fill-moderate",
  "fill-disabled",
  "transparent",
] as const;
export type PillColor = (typeof pillColors)[number];

interface PillProps extends HTMLAttributes<HTMLSpanElement> {
  className?: string;
  children?: ReactNode;
  color?: PillColor;
  size?: "small" | "medium" | "large" | "xlarge" | "xxlarge";
}

const Pill: React.FC<PillProps> = ({
  className,
  children,
  size,
  color,
  ...other
}) => (
  <span
    className={cx(
      CLASS_ROOT,
      {
        [CLASS_ROOT + "--" + size]: size,
      },
      color,
      className,
    )}
    {...other}
  >
    {children}
  </span>
);

Pill.displayName = "Pill";

export { Pill };