type StampCardProps = {
  name: string;
  imageColor: string;
  imageGrey: string;
  collected: boolean;
  onClick?: () => void;
};

export default function StampCard({ name, imageColor, imageGrey, collected, onClick }: StampCardProps) {
  const src = collected ? imageColor : imageGrey;

  return (
    <button
      onClick={onClick}
      className="flex flex-col items-center gap-1.5 p-1 transition-transform active:scale-95"
    >
      <div className="relative w-full aspect-square">
        <div
          className="w-full h-full rounded-full bg-white overflow-hidden flex items-center justify-center border border-[var(--border-muted)]"
          style={{
            boxShadow: collected
              ? "0 2px 6px rgba(212,165,116,0.25), inset 0 0 0 1px rgba(212,165,116,0.15)"
              : "0 1px 3px rgba(0,0,0,0.05)",
          }}
        >
          <img
            src={src}
            alt={name}
            className="w-[92%] h-[92%] object-contain"
            style={{ opacity: collected ? 1 : 0.55 }}
            onError={(e) => {
              const target = e.target as HTMLImageElement;
              target.style.display = "none";
              target.parentElement!.innerHTML += `
                <div class="w-full h-full flex items-center justify-center"
                  style="color: var(--text-muted); opacity: 0.3">
                  <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <circle cx="12" cy="12" r="9"/>
                  </svg>
                </div>
              `;
            }}
          />
        </div>

        {collected && (
          <div className="absolute top-0 right-0 w-4 h-4 rounded-full bg-[var(--jade)] flex items-center justify-center shadow-sm z-10">
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3">
              <polyline points="20 6 9 17 4 12" />
            </svg>
          </div>
        )}
      </div>

      <span
        className="text-[10px] leading-tight truncate w-full text-center"
        style={{ color: collected ? "var(--text-primary)" : "var(--text-muted)" }}
      >
        {name}
      </span>
    </button>
  );
}
