import React from 'react';

interface StatCardProps {
  label: string;
  value: string | number;
  icon?: string;
  trend?: { value: string; positive: boolean };
  color?: 'teal' | 'green' | 'blue' | 'orange' | 'red';
}

const COLOR_MAP: Record<string, string> = {
  teal: 'border-l-reo-teal',
  green: 'border-l-green-500',
  blue: 'border-l-blue-500',
  orange: 'border-l-orange-500',
  red: 'border-l-red-500',
};

const ICON_COLOR_MAP: Record<string, string> = {
  teal: 'bg-reo-teal/10 text-reo-teal',
  green: 'bg-green-50 text-green-600',
  blue: 'bg-blue-50 text-blue-600',
  orange: 'bg-orange-50 text-orange-600',
  red: 'bg-red-50 text-red-600',
};

export function StatCard({ label, value, icon, trend, color = 'teal' }: StatCardProps) {
  return (
    <div className={`bg-white rounded-lg border border-gray-200 border-l-4 ${COLOR_MAP[color]} p-4 shadow-sm`}>
      <div className="flex items-start justify-between">
        <div>
          <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">{label}</p>
          <p className="stat-value mt-1 text-reo-dark">{value}</p>
          {trend && (
            <p className={`text-xs mt-1 font-medium ${trend.positive ? 'text-green-600' : 'text-red-500'}`}>
              {trend.positive ? '↑' : '↓'} {trend.value}
            </p>
          )}
        </div>
        {icon && (
          <div className={`w-10 h-10 rounded-lg flex items-center justify-center text-lg ${ICON_COLOR_MAP[color]}`}>
            {icon}
          </div>
        )}
      </div>
    </div>
  );
}
