import React from "react";
import { formatCurrency, formatNumberWithHtml } from "@/lib/asset-analytics-utils";

interface MetricCardProps {
  label: string;
  value: string | number;
  currency?: string;
  className?: string;
}

export const MetricCard: React.FC<MetricCardProps> = ({ label, value, currency, className = "" }) => {
  const displayValue = currency 
    ? formatCurrency(typeof value === "string" ? parseFloat(value.replace(/<[^>]*>/g, '').replace(/,/g, '')) || 0 : value, currency)
    : formatNumberWithHtml(value);

  return (
    <div className={`rounded-lg border border-slate-200 bg-white p-4 text-center shadow-sm ${className}`}>
      <p className="text-sm font-medium text-slate-600 mb-2">{label}</p>
      <p className="text-lg font-semibold text-slate-900">{displayValue}</p>
    </div>
  );
};