import { ReactNode } from 'react';

import { Card } from '@/components/ui/Card';

type MetricCardProps = {
  title: string;
  value: string;
  subtitle: string;
  icon: ReactNode;
};

export function MetricCard({
  title,
  value,
  subtitle,
  icon,
}: MetricCardProps) {
  return (
    <Card className="h-full">
      <div className="flex items-start gap-4">
        <div className="rounded-2xl bg-blue-500/10 p-3 text-blue-300">
          {icon}
        </div>

        <div>
          <p className="text-sm text-slate-400">
            {title}
          </p>

          <h3 className="mt-1 text-2xl font-bold text-white">
            {value}
          </h3>

          <p className="mt-1 text-xs text-slate-400">
            {subtitle}
          </p>
        </div>
      </div>
    </Card>
  );
}