import { NavLink } from "react-router-dom";

import type { components } from "../api/schema";
import { VisibilityBadge } from "../objects/visibility-badge";
import { Highlight } from "./highlight";

type SearchHitView = components["schemas"]["SearchHitView"];

export function SearchResultRow({ hit }: { hit: SearchHitView }) {
  return (
    <li>
      <NavLink
        to={`/search/${hit.id}`}
        className={({ isActive }) =>
          `block border-b px-3 py-2 ${isActive ? "bg-indigo-50" : "hover:bg-neutral-50"}`
        }
      >
        <div className="text-sm font-semibold">{hit.object_name}</div>
        <div className="mt-0.5 flex items-center gap-2 text-xs text-neutral-500">
          <span>{hit.object_number}</span>
          <VisibilityBadge visibility={hit.visibility} />
        </div>
        {hit.snippet && (
          <p className="mt-1 line-clamp-2 text-xs text-neutral-600">
            <Highlight text={hit.snippet} />
          </p>
        )}
      </NavLink>
    </li>
  );
}