import { getStatusConfig } from '../utils/api'
import { useLanguage } from '../i18n/LanguageContext'

const STATUS_LABEL_MAP = {
  'draft': 'posts.status.draft',
  'in_review': 'posts.status.in_review',
  'approved': 'posts.status.approved',
  'scheduled': 'posts.status.scheduled',
  'published': 'posts.status.published',
  'todo': 'tasks.todo',
  'in_progress': 'tasks.in_progress',
  'done': 'tasks.done',
}

export default function StatusBadge({ status, size = 'sm' }) {
  const { t } = useLanguage()
  const config = getStatusConfig(status)
  
  const sizeClasses = {
    xs: 'text-[10px] px-1.5 py-0.5',
    sm: 'text-xs px-2 py-1',
    md: 'text-sm px-2.5 py-1',
  }

  const labelKey = STATUS_LABEL_MAP[status]
  const label = labelKey ? t(labelKey) : config.label

  return (
    <span className={`inline-flex items-center gap-1.5 rounded-full font-medium ${config.bg} ${config.text} ${sizeClasses[size]}`}>
      <span className={`w-1.5 h-1.5 rounded-full ${config.dot}`}></span>
      {label}
    </span>
  )
}
