import Link from "@/app/components/LocaleLink";

import { TarotCard } from "@/app/lib/tarotCards";

interface Props {
  card: TarotCard;
  direction?: "upright" | "reversed";
  size?: "sm" | "md" | "lg";
  href?: string;
  /** Real card artwork URL from the API — falls back to the CSS placeholder when absent. */
  imageUrl?: string;
  /** Load immediately instead of lazily — use for reveal/result views where the image is always on-screen; leave lazy (default) for large lists like the deck grid. */
  eager?: boolean;
}

export default function TarotCardVisual({ card, direction, size = "md", href, imageUrl, eager }: Props) {
  const content = (
    <div className={`tarot-card-visual size-${size}`}>
      <div
        className={`tarot-card-face arcana-${card.arcana} ${
          direction === "reversed" ? "is-reversed" : ""
        } ${imageUrl ? "has-image" : ""}`}
      >
        {imageUrl ? (
          <img
            src={imageUrl}
            alt={card.name}
            loading={eager ? "eager" : "lazy"}
            className="tarot-card-image"
          />
        ) : (
          <>
            <span className="tarot-card-number">
              {card.arcana === "major" ? String(card.number).padStart(2, "0") : card.number}
            </span>

            <span className="tarot-card-symbol">{card.symbol}</span>

            <span className="tarot-card-name">{card.name}</span>
          </>
        )}
      </div>

      {imageUrl && <span className="tarot-card-caption">{card.name}</span>}

      {direction && (
        <span className={`tarot-direction-badge ${direction}`}>
          {direction === "upright" ? "Upright" : "Reversed"}
        </span>
      )}
    </div>
  );

  if (href) {
    return (
      <Link href={href} className="tarot-card-link">
        {content}
      </Link>
    );
  }

  return content;
}