import React from 'react';
import Image from 'next/image';
import Link from 'next/link';

interface VisualLinkPreviewProps {
  url: string;
  title: string;
  summary: string;
  image: string;
}

export default function VisualLinkPreview({ url, title, summary, image }: VisualLinkPreviewProps) {
  return (
    <Link href={url} target="_blank" rel="noopener noreferrer" className="block my-8 no-underline group">
      <div className="flex flex-col md:flex-row border border-neutral-dark rounded-lg overflow-hidden bg-white hover:shadow-md transition-shadow">
        <div className="relative w-full md:w-48 h-48 md:h-auto flex-shrink-0 bg-neutral-light flex items-center justify-center">
          {image ? (
            <img 
              src={image} 
              alt={title} 
              className="w-full h-full object-cover"
            />
          ) : (
            <div className="text-neutral-dark">No Image</div>
          )}
        </div>
        <div className="p-4 flex flex-col justify-center">
          <h3 className="text-lg font-bold text-primary mb-2 group-hover:underline line-clamp-2">
            {title}
          </h3>
          <p className="text-text-secondary text-sm line-clamp-3">
            {summary}
          </p>
          <span className="text-xs text-text-secondary mt-2 opacity-70">
            {(() => {
              try {
                return new URL(url).hostname;
              } catch (e) {
                return url;
              }
            })()}
          </span>
        </div>
      </div>
    </Link>
  );
}