<Badge />

import clsx from "clsx";
import React from "react";
import styles from "./Badge.module.scss";
 
type BadgeVariant =
  | "primary"
  | "outline"
  | "danger"
  | "success"
  | "warning"
  | "litteralGray"
  | "litteralBrown"
  | "litteralOrange"
  | "litteralYellow"
  | "litteralGreen"
  | "litteralBlue"
  | "litteralPurple"
  | "litteralPink"
  | "litteralRed";
 
interface Props extends React.HTMLAttributes<HTMLDivElement> {
  variant?: BadgeVariant;
  as?: React.ElementType;
}
 
export default function Badge({
  variant = "outline",
  children,
  className,
  as: Component = "div",
  ...props
}: Props) {
  const badgeClassName = clsx(
    styles.badge,
    variant === "primary" && styles.primary,
    variant === "outline" && styles.outline,
    variant === "danger" && styles.danger,
    variant === "success" && styles.success,
    variant === "warning" && styles.warning,
    variant === "litteralGray" && styles.litteralGray,
    variant === "litteralBrown" && styles.litteralBrown,
    variant === "litteralOrange" && styles.litteralOrange,
    variant === "litteralYellow" && styles.litteralYellow,
    variant === "litteralGreen" && styles.litteralGreen,
    variant === "litteralBlue" && styles.litteralBlue,
    variant === "litteralPurple" && styles.litteralPurple,
    variant === "litteralPink" && styles.litteralPink,
    variant === "litteralRed" && styles.litteralRed,
    className,
  );
 
  return React.createElement(
    Component,
    {
      className: badgeClassName,
      ...props,
    },
    children,
  );
}