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

export function DescriptionSection({
  currency
}: {
  currency: CryptocurrencyDetailsResponse["currency"];
}) {
  return (
    <section className="mb-8 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div className="max-w-3xl">
          <h2 className="text-base font-semibold text-slate-900">
            {currency.name} ({currency.symbol})
          </h2>
          <p className="mt-2 text-sm leading-6 text-slate-600">
            {currency.description}
          </p>
        </div>

        <div className="flex flex-col gap-2 sm:items-end pt-3 md:pt-1">
          <div className="flex items-center gap-2">
            <span className="text-sm text-slate-500">Price</span>
            <span className="text-2xl font-semibold tracking-tight sm:text-3xl">
              ${currency.price.toLocaleString()}
            </span>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            <span
              className={clsx(
                "inline-flex items-center rounded-full px-3 py-1 text-xs font-medium",
                currency.percent_change_24h > 0
                  ? "bg-emerald-100 text-emerald-700"
                  : "bg-rose-100 text-rose-700"
              )}
            >
              {formatPercentage(currency.percent_change_24h)}
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}