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}>
      <div className="flex items-center justify-center flex-col">
        <div className="flex items-center gap-4">
              <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>
  );
}