import React from 'react'

export type BadgeStatus = 'active' | 'in-progress' | 'pending' | 'error' | 'inactive'

const statusStyles: Record<BadgeStatus, { bg: string; text: string }> = {
  active: { bg: 'bg-green-50', text: 'text-green-600' },
  'in-progress': { bg: 'bg-teal-50', text: 'text-teal-600' },
  pending: { bg: 'bg-yellow-50', text: 'text-amber-700' },
  error: { bg: 'bg-red-50', text: 'text-red-600' },
  inactive: { bg: 'bg-slate-100', text: 'text-slate-500' },
}

export const BadgeStatus: React.FC<{
  status: BadgeStatus
  children: React.ReactNode
  leftIcon?: string
  rightIcon?: string
  className?: string
}> = ({ status, children, leftIcon, rightIcon, className = '' }) => {
  const { bg, text } = statusStyles[status]
  return (
    <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-caption font-bold ${bg} ${text} ${className}`}>
      {leftIcon && <span className="material-symbols-outlined text-caption">{leftIcon}</span>}
      {children}
      {rightIcon && <span className="material-symbols-outlined text-caption">{rightIcon}</span>}
    </span>
  )
}

export const DotLabel: React.FC<{
  color: string
  children: React.ReactNode
}> = ({ color, children }) => (
  <div className="flex items-center gap-1.5 text-xs font-semibold text-slate-800">
    <span className={`w-1.5 h-1.5 rounded-full ${color}`} />
    {children}
  </div>
)

export const CountBadge: React.FC<{
  value: number | string
  variant?: 'red' | 'teal' | 'default'
  size?: 'sm' | 'md'
}> = ({ value, variant = 'default', size = 'sm' }) => {
  const variantClass = { red: 'bg-red-500', teal: 'bg-teal-500', default: 'bg-slate-500' }[variant]
  const sizeClass = size === 'sm' ? 'h-[18px] min-w-[18px] px-1 text-caption' : 'h-5 min-w-[20px] px-1.5 text-caption'
  return (
    <span className={`text-white rounded-full flex items-center justify-center font-bold ${variantClass} ${sizeClass}`}>
      {value}
    </span>
  )
}

export const NotificationDot: React.FC<{
  variant?: 'red' | 'teal' | 'default'
}> = ({ variant = 'red' }) => {
  const variantClass = { red: 'bg-red-500', teal: 'bg-teal-500', default: 'bg-slate-500' }[variant]
  return (
    <span className={`absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full ${variantClass} border-2 border-white`} />
  )
}

export const FeatureTag: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <span className="px-2 py-0.5 bg-slate-100 text-slate-500 rounded-md text-caption font-semibold">
    {children}
  </span>
)