import type { ReactNode } from 'react'
import { cn } from '@/lib/utils'

export type BadgeTone = 'default' | 'success' | 'warn' | 'danger' | 'info'

export function Badge({
  children,
  tone = 'default',
  size = 'md',
}: {
  children: ReactNode
  tone?: BadgeTone
  size?: 'sm' | 'md' | 'lg'
}) {
  const tones: Record<BadgeTone, string> = {
    default: 'border-[var(--border)] bg-[var(--bg-tertiary)] text-[var(--text-secondary)]',
    success:
      'border-[color-mix(in_srgb,var(--success)_25%,transparent)] bg-[color-mix(in_srgb,var(--success)_12%,transparent)] text-[var(--success)]',
    warn:
      'border-[color-mix(in_srgb,var(--warning)_25%,transparent)] bg-[color-mix(in_srgb,var(--warning)_12%,transparent)] text-[var(--warning)]',
    danger:
      'border-[color-mix(in_srgb,var(--danger)_25%,transparent)] bg-[color-mix(in_srgb,var(--danger)_12%,transparent)] text-[var(--danger)]',
    info:
      'border-[color-mix(in_srgb,var(--info)_25%,transparent)] bg-[color-mix(in_srgb,var(--info)_12%,transparent)] text-[var(--info)]',
  }
  const badgeSizes = {
    sm: 'px-1.5 py-px text-[10px]',
    md: 'px-2 py-0.5 text-[11px]',
    lg: 'px-2.5 py-1 text-[12px]',
  }
  return (
    <span className={cn('inline-flex items-center rounded-md border font-medium', badgeSizes[size], tones[tone])}>
      {children}
    </span>
  )
}
