'use client'

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

const colorMap: Record<string, string> = {
  default: 'text-gray-900',
  green: 'text-emerald-600',
  blue: 'text-blue-600',
  purple: 'text-purple-600',
  yellow: 'text-amber-600',
  red: 'text-red-600',
}

const trendIcons: Record<string, string> = {
  up: '↑',
  down: '↓',
  flat: '→',
}

const trendColors: Record<string, string> = {
  up: 'text-emerald-600',
  down: 'text-red-600',
  flat: 'text-gray-500',
}

export function MetricCard({ element }: ComponentRenderProps) {
  const { label, value, trend, trendValue, color = 'default' } = element.props as {
    label: string; value: string; format?: string
    trend?: string; trendValue?: string; color?: string
  }

  return (
    <div className="bg-white/95 rounded-xl p-5 text-center shadow-sm">
      <div className={`text-3xl font-bold ${colorMap[color] || colorMap.default}`}>{value}</div>
      <div className="text-sm text-gray-500 mt-1">{label}</div>
      {trend && trendValue && (
        <div className={`text-sm font-semibold mt-2 ${trendColors[trend] || trendColors.flat}`}>
          {trendIcons[trend]} {trendValue}
        </div>
      )}
    </div>
  )
}
