'use client'

import type { ComponentRenderProps } from '@json-render/react'

const variantColors: Record<string, string> = {
  active: 'bg-blue-100 text-blue-800',
  complete: 'bg-green-100 text-green-800',
  paused: 'bg-yellow-100 text-yellow-800',
  draft: 'bg-gray-200 text-gray-600',
  error: 'bg-red-100 text-red-800',
  sent: 'bg-blue-100 text-blue-800',
  paid: 'bg-green-100 text-green-800',
  pending: 'bg-yellow-100 text-yellow-800',
  open: 'bg-blue-100 text-blue-700',
  won: 'bg-green-100 text-green-700',
  lost: 'bg-red-100 text-red-700',
}

export function StatusBadge({ element }: ComponentRenderProps) {
  const { label, variant } = element.props as { label: string; variant: string }
  return (
    <span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wide ${variantColors[variant] || variantColors.active}`}>
      {label}
    </span>
  )
}
