Arkie-Library-Frontend/src/components/messageStream/LinkPreviewCard.tsx

import type { LinkPreview } from "../../types/post";

const LINK_ACCENT = "#eeb726";

const DOMAIN_ACCENT_OVERRIDES: Array<[string, string]> = [
  // Tencent Meeting returns themeColor="#000000", which disappears on the
  // dark bubble surface. Keep it consistent with inline link color instead.
  ["meeting.tencent.com", LINK_ACCENT],
];

function linkPreviewAccent(preview: LinkPreview): string {
  const url = preview.canonicalUrl || preview.url;
  try {
    const host = new URL(url).hostname.replace(/^www\./, "");
    const match = DOMAIN_ACCENT_OVERRIDES.find(
      ([domain]) => host === domain || host.endsWith(`.${domain}`),
    );
    if (match) return match[1];
  } catch {
    // Ignore malformed preview URLs and fall back below.
  }
  return preview.themeColor || LINK_ACCENT;
}

/**
 * Telegram-style rich preview card for a single URL embedded in a post.
 *
 * Renders an accent bar on the left, then site name → title → description,
 * with an optional thumbnail at the bottom. The whole card is one anchor
 * that opens `canonicalUrl` in a new tab.
 */
export function LinkPreviewCard({ preview }: { preview: LinkPreview }) {
  const accent = linkPreviewAccent(preview);
  const hasUsefulText =
    preview.title.length > 0 || preview.description.length > 0;
  if (!hasUsefulText && !preview.imageUrl) return null;

  return (
    <a
      href={preview.canonicalUrl || preview.url}
      target="_blank"
      rel="noopener noreferrer"
      className="group block overflow-hidden rounded-lg bg-white/[0.04] transition hover:bg-white/[0.07]"
    >
      <div className="flex">
        <div
          aria-hidden
          className="w-[3px] shrink-0 rounded-l-lg"
          style={{ backgroundColor: accent }}
        />
        <div className="min-w-0 flex-1 px-3 py-2.5">
          {preview.siteName ? (
            <div
              className="truncate text-[12px] leading-4"
              style={{ color: accent }}
            >
              {preview.siteName}
            </div>
          ) : null}
          {preview.title ? (
            <div className="mt-0.5 line-clamp-2 break-words text-[14px] font-semibold leading-5 text-neutral-100">
              {preview.title}
            </div>
          ) : null}
          {preview.description ? (
            <div className="mt-1 line-clamp-3 break-words text-[13px] leading-[18px] text-neutral-300">
              {preview.description}
            </div>
          ) : null}
          {preview.imageUrl ? (
            <div className="mt-2 overflow-hidden rounded-md bg-black/30">
              <img
                src={preview.imageUrl}
                alt=""
                loading="lazy"
                decoding="async"
                width={preview.imageWidth}
                height={preview.imageHeight}
                className="block aspect-[1.91/1] w-full object-cover transition duration-300 group-hover:scale-[1.02]"
              />
            </div>
          ) : null}
        </div>
      </div>
    </a>
  );
}