'use client';
import React from 'react';

type KPIProps = {
  title: string;
  value: number;
  trend?: number;
  variant?: 'default' | 'warning' | 'success' | 'accent';
  isCurrency?: boolean;
};

const styleMap: Record<KPIProps['variant'], string> = {
  default: 'bg-white',
  warning: 'bg-yellow-50',
  success: 'bg-green-50',
  accent: 'bg-blue-50',
};

export default function KPI({ title, value, trend = 0, variant = 'default', isCurrency = false }: KPIProps) {
  const formattedValue = isCurrency
    ? value.toLocaleString('es-VE', { style: 'currency', currency: 'VES' })
    : value.toLocaleString('es-VE');

  return (
    <div className={`p-5 rounded-3xl shadow-sm border ${styleMap[variant]} h-full flex flex-col justify-between`}>
      <div>
        <p className="text-sm font-medium text-slate-500">{title}</p>
        <p className="mt-4 text-3xl font-semibold text-slate-900">{formattedValue}</p>
      </div>

      <div className="mt-5 flex items-center gap-2 text-sm text-slate-500">
        <span className={`inline-flex items-center rounded-full px-3 py-1 ${trend >= 0 ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700'}`}>
          {trend >= 0 ? '▲' : '▼'} {Math.abs(trend)}%
        </span>
        <span>en el último periodo</span>
      </div>
    </div>
  );
}