Badge

import { css, cx } from "@linaria/core";
import type React from "react";
 
interface Props extends React.HTMLAttributes<HTMLDivElement> {
  variant?: "primary" | "outline" | "danger" | "success" | "warning";
  as?: React.ElementType;
}
 
export default function Badge({
  variant = "outline",
  children,
  className,
  as: Component = "div",
  ...props
}: Props) {
  return (
    <Component
      className={cx(
        baseBadgeStyle,
        variant === "primary" && primaryStyle,
        variant === "outline" && outlineStyle,
        variant === "danger" && dangerStyle,
        variant === "success" && successStyle,
        variant === "warning" && warningStyle,
        className,
      )}
      {...props}
    >
      {children}
    </Component>
  );
}
 
const baseBadgeStyle = css`
  @layer debase {
    border-radius: 999px;
    padding: calc(var(--debase__spacing__x05) - 1px) var(--debase__spacing__x1);
    display: flex;
    align-items: center;
    gap: var(--debase__spacing__x1);
    width: fit-content;
    font-size: var(--debase__font-size__normal);
    line-height: 1.5;
  }
`;
 
const primaryStyle = css`
  @layer debase {
    background: var(--debase__color__primary);
    color: var(--debase__color__primary-label);
    border: 1px solid var(--debase__color__primary);
    a & {
      &:hover {
        background: var(--hoverEffect), var(--debase__color__primary);
      }
    }
  }
`;
 
const outlineStyle = css`
  @layer debase {
    background: var(--debase__color__background);
    border: 1px solid var(--debase__color__line);
    color: var(--debase__color__text);
    a & {
      &:hover {
        background: var(--hoverEffect);
      }
    }
  }
`;
 
const dangerStyle = css`
  @layer debase {
    background: var(--debase__color__danger);
    color: var(--debase__color__danger-label);
    border: 1px solid var(--debase__color__danger);
    a & {
      &:hover {
        background: var(--hoverEffect), var(--debase__color__danger);
      }
    }
  }
`;
 
const successStyle = css`
  @layer debase {
    background: var(--debase__color__success);
    color: var(--debase__color__success-label);
    border: 1px solid var(--debase__color__success);
    a & {
      &:hover {
        background: var(--hoverEffect), var(--debase__color__success);
      }
    }
  }
`;
 
const warningStyle = css`
  @layer debase {
    background: var(--debase__color__warning);
    color: var(--debase__color__warning-label);
    border: 1px solid var(--debase__color__warning);
    a & {
      &:hover {
        background: var(--hoverEffect), var(--debase__color__warning);
      }
    }
  }
`;