import { cva, type VariantProps } from 'class-variance-authority';
import type { HTMLAttributes } from 'react';

import { cn } from '../lib/cn';

export const badgeVariants = cva(
  'inline-flex items-center gap-1 px-2 py-1 text-[0.625rem] font-semibold uppercase tracking-widest',
  {
    variants: {
      variant: {
        neutral: 'bg-ink-100 text-ink-700',
        solid: 'bg-ink-950 text-white',
        sale: 'bg-sale text-white',
        new: 'bg-volt-500 text-ink-950',
        success: 'bg-success text-white',
        warning: 'bg-warning text-ink-950',
        outline: 'border border-ink-300 text-ink-700',
      },
    },
    defaultVariants: { variant: 'neutral' },
  },
);

export interface BadgeProps
  extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {}

export function Badge({ className, variant, ...props }: BadgeProps) {
  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
}