import { formatNumber } from "~/lib/utils";
import { BaseCard } from "./base-card";

interface MetricCardProps {
  title: string;
  value: string | number;
  percentValue?: string | number;
  valueLabel?: string;
  percentLabel?: string;
}

export function MetricCard({
  title,
  value,
  percentValue,
  valueLabel = "میلیون ریال",
  percentLabel = "درصد به کل",
}: MetricCardProps) {
  return (
    <BaseCard title={title} className="h-full">
      <div className="flex items-center justify-center flex-col">
        <div className="flex items-center gap-4 h-full">
          <div className="text-center">
            <p className="text-3xl font-bold text-green-400">
              {formatNumber(value)}
            </p>
            <div className="text-xs text-gray-400 font-persian">
              {valueLabel}
            </div>
          </div>
          {percentValue !== undefined && (
            <>
              <span className="text-5xl font-thin text-gray-600">/</span>
              <div className="text-center">
                <p className="text-3xl font-bold text-green-400">
                  {formatNumber(percentValue)}%
                </p>
                <div className="text-xs text-gray-400 font-persian">
                  {percentLabel}
                </div>
              </div>
            </>
          )}
        </div>
      </div>
    </BaseCard>
  );
}