import clsx from "clsx";
import { Link } from "react-router";
import type {
  CryptocurrenciesListResponse,
  SimpleCryptoCurrency
} from "~/types/crypto-api";
import { formatPercentage } from "~/utils/format";

function PricingRow({
  currency,
  index
}: {
  currency: SimpleCryptoCurrency;
  index: number;
}) {
  return (
    <tr className="hover:bg-slate-50">
      <td className="px-5 py-4 text-slate-500 hidden md:table-cell">
        {index + 1}
      </td>
      <td className="px-5 py-4 flex items-center gap-3">
        <Link className="flex flex-row gap-3" to={`/crypto/${currency.id}`}>
          <img
            className="h-8 w-8 rounded-full"
            src={currency.logo}
            alt={`${currency.name} Logo`}
          />
          <div>
            <p className="font-medium">{currency.name}</p>
            <p className="text-xs text-slate-500">{currency.symbol}</p>
          </div>
        </Link>
      </td>
      <td className="px-5 py-4 font-medium">
        ${currency.price.toLocaleString()}
      </td>
      <td className="px-5 py-4 hidden md:table-cell">
        ${(currency.market_cap / 1_000_000_000).toFixed(1)}B
      </td>
      <td className="px-5 py-4 hidden md:table-cell">
        ${(currency.volume_24h / 1_000_000_000).toFixed(1)}B
      </td>
      <td className="px-5 py-4">
        <span
          className={clsx(
            "rounded-full px-2 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>
      </td>
    </tr>
  );
}

export function PricingTable({
  currencies
}: {
  currencies: CryptocurrenciesListResponse["currencies"];
}) {
  return (
    <section className="mt-8 rounded-2xl border border-slate-200 bg-white shadow-sm">
      <div className="overflow-x-auto">
        <table className="min-w-full text-left text-sm">
          <thead className="bg-slate-100 text-xs uppercase tracking-wider text-slate-600">
            <tr>
              <th className="px-5 py-3 hidden md:table-cell">#</th>
              <th className="px-5 py-3">Asset</th>
              <th className="px-5 py-3">Price</th>
              <th className="px-5 py-3 hidden md:table-cell">Market cap</th>
              <th className="px-5 py-3 hidden md:table-cell">Volume (24h)</th>
              <th className="px-5 py-3">Change (24h)</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100">
            {currencies.map((currency, index) => (
              <PricingRow key={currency.id} currency={currency} index={index} />
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}