import { cn } from '../../lib/cn';
import { Badge as UIBadge } from '../../ui/badge';
import { Text } from '../../ui/text';

import type { BadgeProps, BadgeTone } from './Badge.types';

const containerClass: Record<BadgeTone, string> = {
  default: 'bg-primary border-transparent',
  secondary: 'bg-secondary border-transparent',
  success: 'bg-success border-transparent',
  warning: 'bg-warning border-transparent',
  danger: 'bg-danger border-transparent',
  outline: 'bg-transparent border-border',
  muted: 'bg-content3 border-transparent',
};

const textClass: Record<BadgeTone, string> = {
  default: 'text-primary-foreground',
  secondary: 'text-secondary-foreground',
  success: 'text-success-foreground',
  warning: 'text-black',
  danger: 'text-white',
  outline: 'text-foreground',
  muted: 'text-foreground',
};

export function Badge({
  tone = 'default',
  className,
  textClassName,
  children,
  ...props
}: BadgeProps) {
  return (
    <UIBadge className={cn(containerClass[tone], className)} {...props}>
      {typeof children === 'string' ? (
        <Text className={cn('text-caption font-semibold', textClass[tone], textClassName)}>
          {children}
        </Text>
      ) : (
        children
      )}
    </UIBadge>
  );
}