Badge

import { Slot } from '@radix-ui/react-slot';
import { cva, type VariantProps } from 'class-variance-authority';
import type * as React from 'react';
import { cn } from '@/lib/utils';

// @fast-ds [email protected]

const badgeVariants = cva(
  'inline-flex w-fit shrink-0 items-center gap-1.5 whitespace-nowrap rounded-sm border font-display font-semibold uppercase tracking-[0.08em] [&_svg]:size-3 [&_svg]:shrink-0',
  {
    variants: {
      variant: {
        neutral: 'border-transparent bg-foreground/10 text-foreground',
        primary: 'border-transparent bg-primary text-primary-foreground',
        /** White on dark, black type: the menu's label tag. */
        inverse: 'border-transparent bg-foreground text-background',
        outline: 'border-foreground/20 text-muted-foreground',
        /** Status reads soft: a tint and readable text, so a list of them stays calm. */
        success: 'border-success/30 bg-success/10 text-success-text',
        danger: 'border-danger/30 bg-danger/10 text-danger-text',
        warning: 'border-warning/30 bg-warning/10 text-warning',
        info: 'border-info/30 bg-info/10 text-info',
        /** Membership tiers and partners: the brand constants, solid. */
        partner: 'border-transparent bg-partner text-white',
        premium: 'border-transparent bg-premium text-black',
        silver: 'border-transparent bg-silver text-black',
        bronze: 'border-transparent bg-bronze text-white',
      },
      size: {
        sm: 'px-1.5 py-px text-[0.6875rem]',
        md: 'px-2 py-0.5 text-xs',
      },
    },
    defaultVariants: { variant: 'neutral', size: 'md' },
  },
);

export type BadgeProps = React.ComponentProps<'span'> &
  VariantProps<typeof badgeVariants> & {
    /** A leading status dot in the current colour. */
    dot?: boolean;
    asChild?: boolean;
  };

/** A short label: a status, a tier, a count. Square, uppercase, tracked. */
function Badge({ className, variant, size, dot, asChild, children, ...props }: BadgeProps) {
  const Comp = asChild ? Slot : 'span';
  return (
    <Comp data-slot="badge" className={cn(badgeVariants({ variant, size }), className)} {...props}>
      {dot && <span aria-hidden className="size-1.5 shrink-0 rounded-full bg-current" />}
      {children}
    </Comp>
  );
}

export { Badge, badgeVariants };