/**
 * Trouve-KA — vignette d'un résultat de recherche (og:image hotlinkée)
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 *
 * Repli silencieux : si l'image 404 ou refuse le hotlink, le bloc disparaît
 * entièrement (jamais d'icône cassée). `<img>` natif — domaines arbitraires,
 * donc pas de next/image.
 */

"use client";

import { useState } from "react";

interface ResultThumbnailProps {
  src: string;
  /** URL du résultat : la vignette est cliquable mais hors tabulation. */
  href: string;
}

export function ResultThumbnail({ src, href }: ResultThumbnailProps) {
  const [failed, setFailed] = useState(false);

  if (failed) return null;

  return (
    <a
      href={href}
      tabIndex={-1}
      aria-hidden="true"
      className="shrink-0 self-start"
    >
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src={src}
        alt=""
        loading="lazy"
        decoding="async"
        referrerPolicy="no-referrer"
        onError={() => setFailed(true)}
        className="h-[76px] w-[76px] rounded-card border-[1.5px] border-ink bg-surface-2 object-cover shadow-[3px_3px_0_rgba(20,24,20,0.12)] transition-[transform,box-shadow] duration-150 group-hover:-translate-x-px group-hover:-translate-y-px group-hover:shadow-[4px_4px_0_rgba(20,24,20,0.2)] sm:h-[110px] sm:w-[110px]"
      />
    </a>
  );
}