import type { SearchResult } from "@/lib/mock-data";

interface ResultCardProps {
  result: SearchResult;
}

export function ResultCard({ result }: ResultCardProps) {
  const domain = result.parsed_url[1];
  const faviconUrl = `https://www.google.com/s2/favicons?domain=${domain}&sz=32`;

  return (
    <a
      href={result.url}
      target="_blank"
      rel="noopener noreferrer"
      className="block px-4 py-3 -mx-4 rounded-lg transition-colors hover:bg-result-hover group"
    >
      <div className="flex items-center gap-2 mb-1">
        <img src={faviconUrl} alt="" className="w-4 h-4 rounded-sm" loading="lazy" />
        <span className="text-xs text-muted-foreground truncate">{result.pretty_url}</span>
        {result.engines.length > 1 && (
          <span className="text-[10px] text-muted-foreground/60 ml-auto shrink-0">
            {result.engines.length} engines
          </span>
        )}
      </div>
      <h3 className="text-link group-hover:text-link-hover font-medium text-base leading-snug mb-1 line-clamp-1">
        {result.title}
      </h3>
      <p className="text-sm text-muted-foreground leading-relaxed line-clamp-2">
        {result.content}
      </p>
      {result.publishedDate && (
        <span className="text-xs text-muted-foreground/70 mt-1 inline-block">
          {new Date(result.publishedDate).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" })}
        </span>
      )}
    </a>
  );
}