import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { type LucideIcon } from "lucide-react";

interface MetricCardProps {
  title: string;
  value: string | number;
  description?: string;
  icon: LucideIcon;
  trend?: { value: number; positive: boolean };
}

export function MetricCard({ title, value, description, icon: Icon, trend }: MetricCardProps) {
  return (
    <Card className="bg-white border border-gray-200 rounded-xl p-5 shadow-none">
      <CardHeader className="flex flex-row items-center justify-between pb-2 p-0">
        <CardTitle className="text-xs font-medium text-gray-500">{title}</CardTitle>
        <Icon className="h-4 w-4 text-gray-400" />
      </CardHeader>
      <CardContent className="p-0 pt-2">
        <div className="text-2xl font-semibold text-gray-900">{value}</div>
        {(description || trend) && (
          <p className="text-xs text-gray-500 mt-2">
            {trend && (
              <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
                trend.positive
                  ? "bg-green-50 text-green-700"
                  : "bg-red-50 text-red-700"
              }`}>
                {trend.positive ? "+" : ""}{trend.value}%
              </span>
            )}
            {trend && description && " "}
            {description}
          </p>
        )}
      </CardContent>
    </Card>
  );
}