import * as React from 'react'
import { cn } from '../../lib/utils'

export interface StatusBadgeConfig {
  label: string
  className: string
}

export interface StatusBadgeProps<T extends string> {
  status: T
  config: Record<T, StatusBadgeConfig>
  size?: 'sm' | 'md'
  className?: string
  /** Optional leading content (e.g. a status dot) rendered before the label. */
  children?: React.ReactNode
}

const sizeClasses = {
  sm: 'px-2 py-0.5 text-xs',
  md: 'px-2.5 py-0.5 text-xs',
}

export function StatusBadge<T extends string>({
  status,
  config,
  size = 'md',
  className,
  children,
}: StatusBadgeProps<T>) {
  const entry = config[status]

  if (!entry) {
    return (
      <span
        className={cn(
          'inline-flex items-center rounded-full font-medium bg-gray-100 text-gray-700 border border-gray-200',
          sizeClasses[size],
          className
        )}
      >
        {children}
        {status}
      </span>
    )
  }

  return (
    <span
      className={cn(
        'inline-flex items-center rounded-full font-medium',
        sizeClasses[size],
        entry.className,
        className
      )}
    >
      {children}
      {entry.label}
    </span>
  )
}