'use client'

import React from 'react'

export function StatCard({
  label,
  value,
  icon,
  color,
}: {
  label: string
  value: string | number
  icon: React.ReactNode
  color: 'indigo' | 'green' | 'blue' | 'red'
}) {
  const colorMap = {
    indigo: {
      iconBg: 'bg-indigo-100',
      iconText: 'text-indigo-600',
      valueBg: '',
    },
    green: {
      iconBg: 'bg-green-100',
      iconText: 'text-green-600',
      valueBg: '',
    },
    blue: {
      iconBg: 'bg-blue-100',
      iconText: 'text-blue-600',
      valueBg: '',
    },
    red: {
      iconBg: 'bg-red-100',
      iconText: 'text-red-600',
      valueBg: '',
    },
  }
  const c = colorMap[color]

  return (
    <div className="bg-white rounded-xl border border-slate-200 p-5 hover:shadow-sm transition-shadow">
      <div className="flex items-center gap-3 mb-3">
        <div className={`w-10 h-10 rounded-lg ${c.iconBg} flex items-center justify-center`}>
          <span className={c.iconText}>{icon}</span>
        </div>
        <span className="text-sm font-medium text-slate-500">{label}</span>
      </div>
      <div className="text-2xl font-bold text-slate-900">{value}</div>
    </div>
  )
}