"use client";

/**
 * What the guest's link will look like when it is shown somewhere else (design D5).
 *
 * Rendered from the preview the API composes, which is the same model that builds the block
 * in the guest's email and the meta tags a chat application reads. An admin approving a
 * message has therefore seen the thing the guest gets — the failure this panel exists to
 * prevent is an admin approving a summary and a guest receiving something else.
 *
 * The layout deliberately imitates a chat application's unfurl card rather than matching the
 * admin panel's own styling. It is a picture of somewhere else, and making it look native
 * here would suggest it is a section of this page rather than a rehearsal of another one.
 */
export function LinkPreviewCard({
  title,
  description,
  guestName,
  imageUrl,
}: {
  title: string;
  description: string;
  guestName: string;
  imageUrl: string | null;
}) {
  return (
    <figure className="overflow-hidden rounded-xl border border-stone-200 bg-white">
      {imageUrl ? (
        /* A plain <img>, not next/image: the URL is a runtime value from the API, and
           next/image resolves its remote allowlist at build time — the same build-time
           versus request-time trap that `lib/public-config.ts` exists to avoid. The image
           is already content-addressed, already sized, and served with `immutable`, so
           there is nothing left for the optimiser to do. */
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={imageUrl}
          alt=""
          className="block aspect-[1200/630] w-full bg-stone-100 object-cover"
        />
      ) : (
        <div className="flex aspect-[1200/630] w-full items-center justify-center bg-stone-50 px-4 text-center">
          <span className="text-xs text-stone-500">
            No preview image — this link will share as text only.
          </span>
        </div>
      )}
      <figcaption className="space-y-1 px-3 py-2.5">
        {guestName && <p className="text-xs text-stone-500">{guestName},</p>}
        <p className="text-sm leading-snug font-semibold text-stone-900">{title}</p>
        <p className="text-xs leading-snug text-stone-600">{description}</p>
      </figcaption>
    </figure>
  );
}