"use client";

import { formatTimestamp } from "@/lib/format";
import type { RateAsset } from "@/lib/rates";

interface ConverterCardRatesSummaryProps {
  fromAsset?: RateAsset;
  toAsset?: RateAsset;
  currentRate: string | null;
  inverseRate: string | null;
  updatedAt: string;
}

export function ConverterCardRatesSummary({
  fromAsset,
  toAsset,
  currentRate,
  inverseRate,
  updatedAt,
}: ConverterCardRatesSummaryProps) {
  return (
    <div className="grid gap-3 text-sm text-muted-foreground sm:grid-cols-3">
      <div>
        <p className="text-xs uppercase tracking-[0.12em]">Current rate</p>
        <p className="mt-1 text-sm text-foreground">
          {fromAsset && toAsset && currentRate
            ? `1 ${fromAsset.code} = ${currentRate} ${toAsset.code}`
            : "-"}
        </p>
      </div>
      <div>
        <p className="text-xs uppercase tracking-[0.12em]">Inverse rate</p>
        <p className="mt-1 text-sm text-foreground">
          {fromAsset && toAsset && inverseRate
            ? `1 ${toAsset.code} = ${inverseRate} ${fromAsset.code}`
            : "-"}
        </p>
      </div>
      <div>
        <p className="text-xs uppercase tracking-[0.12em]">Last updated</p>
        <p className="mt-1 text-sm text-foreground">{formatTimestamp(updatedAt)}</p>
      </div>
    </div>
  );
}