import type { CryptocurrencyDetailsResponse } from "~/types/crypto-api";
import { formatPercentage } from "~/utils/format";

export function KeyStats({
  currency
}: {
  currency: CryptocurrencyDetailsResponse["currency"];
}) {
  return (
    <div className="lg:col-span-2 rounded-2xl border border-slate-200 bg-white shadow-sm">
      <div className="border-b border-slate-200 p-5">
        <h2 className="text-base font-semibold text-slate-900">Key Stats</h2>
        <p className="mt-1 text-xs text-slate-500">Basic market data.</p>
      </div>

      <div className="p-5">
        <dl className="divide-y divide-slate-100">
          <div className="flex items-center justify-between py-3">
            <dt className="text-sm text-slate-600">Market Cap</dt>
            <dd className="text-sm font-semibold text-slate-900">
              ${(currency.market_cap / 1_000_000_000).toLocaleString()}B
            </dd>
          </div>
          <div className="flex items-center justify-between py-3">
            <dt className="text-sm text-slate-600">Volume (24h)</dt>
            <dd className="text-sm font-semibold text-slate-900">
              ${(currency.volume_24h / 1_000_000_000).toLocaleString()}B
            </dd>
          </div>
          <div className="flex items-center justify-between py-3">
            <dt className="text-sm text-slate-600">Circulating Supply</dt>
            <dd className="text-sm font-semibold text-slate-900">
              {(currency.circulating_supply / 1_000_000).toFixed(1)}M {currency.symbol}
            </dd>
          </div>
          <div className="flex items-center justify-between py-3">
            <dt className="text-sm text-slate-600">Max Supply</dt>
            <dd className="text-sm font-semibold text-slate-900">
              {currency.max_supply
                ? `${(currency.max_supply / 1_000_000).toFixed(1)}M ${currency.symbol}`
                : "N/A"}
            </dd>
          </div>
          <div className="flex items-center justify-between py-3">
            <dt className="text-sm text-slate-600">Percent change (24h)</dt>
            <dd className="text-sm font-semibold text-slate-900">
              {formatPercentage(currency.percent_change_24h)}
            </dd>
          </div>
          <div className="flex items-center justify-between py-3">
            <dt className="text-sm text-slate-600">Percent change (7d)</dt>
            <dd className="text-sm font-semibold text-slate-900">
              {formatPercentage(currency.percent_change_7d)}
            </dd>
          </div>
        </dl>
      </div>
    </div>
  );
}