// src/components/lexical/LinkPreviewCard.tsx
import Image from 'next/image'

export function LinkPreviewCard({
  url,
  title,
  description,
  imageUrl,
}: {
  url: string
  title?: string
  description?: string
  imageUrl?: string
}) {
  let host = url
  try { host = new URL(url).host } catch {}
  return (
    <a
      href={url}
      target="_blank"
      rel="noopener noreferrer"
      className="border-hair grid grid-cols-[1fr_auto] items-center gap-4 border p-4 my-6 no-underline hover:border-ink"
    >
      <div className="min-w-0">
        <div className="text-ink-3 font-mono text-[10.5px] tracking-widest uppercase mb-1">{host}</div>
        {title && <div className="text-ink font-serif text-[18px] leading-tight">{title}</div>}
        {description && <div className="text-ink-2 text-[14px] mt-1 line-clamp-2">{description}</div>}
      </div>
      {imageUrl && (
        <Image src={imageUrl} alt="" width={64} height={64} className="object-cover" />
      )}
    </a>
  )
}