import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";

interface AdminMetricCardProps {
  title: string;
  value: string | number;
  icon?: IconDefinition;
  trend?: {
    value: number;
    isPositive: boolean;
    label?: string;
  };
  description?: string;
}

export default function AdminMetricCard({
  title,
  value,
  icon,
  trend,
  description,
}: AdminMetricCardProps) {
  return (
    <div className="rounded-xl border border-slate-800 bg-slate-900 p-5 transition-colors hover:border-slate-700">
      <div className="flex items-start justify-between gap-4">
        <div className="min-w-0 flex-1">
          <p className="text-xs font-medium uppercase tracking-wider text-slate-400">
            {title}
          </p>
          <p className="mt-2 text-3xl font-semibold text-slate-100">{value}</p>
          {trend && (
            <div className="mt-2 flex items-center gap-1.5">
              <span
                className={`inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium ${
                  trend.isPositive
                    ? "bg-emerald-500/10 text-emerald-300"
                    : "bg-rose-500/10 text-rose-300"
                }`}
              >
                {trend.isPositive ? "↑" : "↓"} {Math.abs(trend.value)}%
              </span>
              {trend.label && (
                <span className="text-xs text-slate-500">vs {trend.label}</span>
              )}
            </div>
          )}
          {description && (
            <p className="mt-2 text-xs text-slate-500">{description}</p>
          )}
        </div>
        {icon && (
          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-indigo-500/10 text-indigo-400">
            <FontAwesomeIcon icon={icon} className="h-4 w-4" />
          </div>
        )}
      </div>
    </div>
  );
}
