frontend/src/components/MetricCard.tsx

import React, { FC } from 'react';

interface Props {
  title: string;
  value: number | string;
  description: string;
  colorHex: string;
  subtitle?: string;
}

const MetricCard: FC<Props> = ({ title, value, description, colorHex, subtitle }) => (
  <div
    className="bg-white rounded-xl shadow-lg p-6 transition-shadow hover:shadow-xl"
    style={{ borderLeft: `4px solid ${colorHex}` }}
  >
    <h3 className="text-lg font-semibold text-gray-800 mb-1">{title}</h3>
    {subtitle && <p className="text-xs text-gray-500 mb-2">{subtitle}</p>}
    <div className="text-3xl font-bold mb-2">{typeof value === 'number' ? value.toFixed(3) : value}</div>
    <p className="text-sm text-gray-600">{description}</p>
  </div>
);

export default MetricCard;