SatsFaucet/frontend/src/components/SponsorCard.tsx

import { useEffect, useRef } from "react";
import { getSponsorClickUrl, patchSponsorView, type SponsorHomepageItem } from "../api";

interface SponsorCardProps {
  sponsor: SponsorHomepageItem;
}

function getDaysLeft(expiresAt: number | null): number {
  if (!expiresAt) return 0;
  const now = Math.floor(Date.now() / 1000);
  return Math.max(0, Math.ceil((expiresAt - now) / 86400));
}

function extractDomain(url: string): string {
  try {
    const u = new URL(url);
    return u.hostname.replace(/^www\./, "");
  } catch {
    return "Sponsor";
  }
}

export function SponsorCard({ sponsor }: SponsorCardProps) {
  const cardRef = useRef<HTMLDivElement>(null);
  const viewedRef = useRef(false);

  useEffect(() => {
    const el = cardRef.current;
    if (!el || viewedRef.current) return;
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0]?.isIntersecting && !viewedRef.current) {
          viewedRef.current = true;
          patchSponsorView(sponsor.id).catch(() => {});
        }
      },
      { threshold: 0.5 }
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, [sponsor.id]);

  const daysLeft = getDaysLeft(sponsor.expires_at);
  const clickUrl = getSponsorClickUrl(sponsor.id);

  return (
    <article ref={cardRef} className="sponsor-card">
      <a
        href={clickUrl}
        target="_blank"
        rel="noopener noreferrer"
        className="sponsor-card-link"
        aria-label={`Visit ${sponsor.title}`}
      >
        <div className="sponsor-card-image-wrap">
          {sponsor.image_url ? (
            <img
              src={sponsor.image_url}
              alt=""
              className="sponsor-card-image"
              loading="lazy"
              onError={(e) => {
                (e.target as HTMLImageElement).style.display = "none";
                (e.target as HTMLImageElement).nextElementSibling?.classList.remove("hidden");
              }}
            />
          ) : null}
          <div className={`sponsor-card-fallback ${sponsor.image_url ? "hidden" : ""}`}>
            <span className="sponsor-card-fallback-icon">🔗</span>
            <span className="sponsor-card-fallback-domain">{extractDomain(sponsor.link_url)}</span>
          </div>
        </div>
        <div className="sponsor-card-body">
          <h3 className="sponsor-card-title">{sponsor.title}</h3>
          <p className="sponsor-card-desc">{sponsor.description}</p>
          <span className="sponsor-card-cta">Visit sponsor</span>
        </div>
      </a>
      <div className="sponsor-card-meta">
        <span className="sponsor-card-days">{daysLeft} days left</span>
      </div>
    </article>
  );
}