import { type HTMLAttributes } from 'react';

import { cn } from '@/utils/classNames';

export type BadgeTone = 'neutral' | 'accent' | 'warm' | 'success' | 'warning' | 'danger';
export type BadgeSize = 'sm' | 'md';

export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  readonly tone?: BadgeTone;
  readonly size?: BadgeSize;
}

const toneClasses: Record<BadgeTone, string> = {
  neutral: 'border-border/70 bg-elevated/70 text-muted',
  accent: 'border-accent/35 bg-accent/12 text-accent',
  warm: 'border-warm/35 bg-warm/12 text-warm',
  success: 'border-success/35 bg-success/12 text-success',
  warning: 'border-warning/35 bg-warning/12 text-warning',
  danger: 'border-danger/35 bg-danger/12 text-danger'
};

const sizeClasses: Record<BadgeSize, string> = {
  sm: 'px-2 py-0.5 text-[0.68rem]',
  md: 'px-2.5 py-1 text-xs'
};

export function Badge({ children, className, size = 'md', tone = 'neutral', ...props }: BadgeProps) {
  return (
    <span
      className={cn(
        'inline-flex max-w-full items-center rounded-full border font-semibold uppercase tracking-[0.16em]',
        toneClasses[tone],
        sizeClasses[size],
        className,
      )}
      {...props}
    >
      {children}
    </span>
  );
}