import type { ReactNode } from "react";
import { Card } from "@heroui/react";

type MetricIndicatorProps = {
  title: string;
  value: ReactNode;
  hint?: ReactNode;
  footer?: ReactNode;
  icon?: ReactNode;
  color?: string;
  valueClassName?: string;
};

export default function MetricIndicator({
  title,
  value,
  hint,
  footer,
  icon,
  color = "border-border",
  valueClassName = "text-xl font-semibold text-foreground tabular-nums",
}: MetricIndicatorProps) {
  return (
    <Card className={`border-t-2 ${color}`}>
      <Card.Content className="flex flex-col gap-3">
        <div className="flex items-start justify-between gap-2">
          <p className="text-xs text-muted">{title}</p>
          {icon}
        </div>
        <p className={valueClassName}>{value}</p>
        {footer ? (
          <div className="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-muted">
            {footer}
          </div>
        ) : (
          hint && <div className="text-xs text-muted">{hint}</div>
        )}
      </Card.Content>
    </Card>
  );
}