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

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

/**
 * 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 = preview.themeColor || "#EEB726";
  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>
  );
}