// /media/hf/data/projects/Dawinder/transport/components/ui/MetricCard.tsx
import React from 'react';
import { cn } from '@/lib/utils';

interface MetricCardProps {
  label: string;
  value: string;
  subtitle?: string;
  color: 'green' | 'amber' | 'blue' | 'red' | 'purple';
  icon?: React.ReactNode;
}

const colorMap = {
  green: 'text-status-green bg-status-green/10 border-status-green/20',
  amber: 'text-status-amber bg-status-amber/10 border-status-amber/20',
  blue: 'text-status-blue bg-status-blue/10 border-status-blue/20',
  red: 'text-status-red bg-status-red/10 border-status-red/20',
  purple: 'text-status-purple bg-status-purple/10 border-status-purple/20',
};

const textMap = {
  green: 'text-status-green',
  amber: 'text-status-amber',
  blue: 'text-status-blue',
  red: 'text-status-red',
  purple: 'text-status-purple',
};

export default function MetricCard({ label, value, subtitle, color, icon }: MetricCardProps) {
  return (
    <div className="bg-surface border border-border rounded-xl p-5 flex flex-col">
      <div className="flex justify-between items-start mb-2">
        <span className="text-text-muted font-medium text-sm">{label}</span>
        {icon && (
          <div className={cn("p-2 rounded-lg border", colorMap[color])}>
            {icon}
          </div>
        )}
      </div>
      <div className="mt-auto">
        <span className={cn("text-2xl font-bold", textMap[color])}>{value}</span>
        {subtitle && <p className="text-xs text-text-hint mt-1">{subtitle}</p>}
      </div>
    </div>
  );
}