'use client'

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

const statusColors: 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',
}

export function DetailHeader({ element, children }: ComponentRenderProps) {
  const { title, subtitle, entityId, status, statusVariant } = element.props as {
    title: string; subtitle?: string; entityId?: string; status?: string; statusVariant?: string
  }

  return (
    <div className="bg-white rounded-xl p-6 mb-5 shadow-sm">
      <div className="flex items-start justify-between mb-1">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">{title}</h1>
          {entityId && <p className="text-sm text-gray-400 mt-0.5">{entityId}</p>}
          {subtitle && <p className="text-sm text-gray-500 mt-1">{subtitle}</p>}
        </div>
        {status && (
          <span className={`px-3 py-1.5 rounded-full text-xs font-semibold uppercase tracking-wider ${statusColors[statusVariant || 'active'] || statusColors.active}`}>
            {status}
          </span>
        )}
      </div>
      {children}
    </div>
  )
}
