import { Button } from "@/components/ui/button";
import type { DocumentSearchResult } from "@/types/search";

interface PageHoverCardProps {
  result: DocumentSearchResult;
  onPreview?: () => void;
}

const formatRelative = (value: string | null) => {
  if (!value) return "未知时间";
  const date = new Date(value);
  return date.toLocaleString();
};

export function PageHoverCard({ result, onPreview }: PageHoverCardProps) {
  return (
    <div className="space-y-2 text-xs text-gray-600">
      <div>
        <p className="text-sm font-semibold text-gray-900">{result.title || "无标题"}</p>
        <p className="text-[11px] text-gray-400">
          最近更新：{formatRelative(result.updatedAt)} · 创建：{formatRelative(result.createdAt)}
        </p>
      </div>
      <div
        className="line-clamp-4 rounded-lg bg-[#f8fafc] p-2 text-[11px] leading-relaxed text-gray-600"
        dangerouslySetInnerHTML={{ __html: result.snippet }}
      />
      <Button
        type="button"
        size="sm"
        variant="outline"
        className="w-full text-[11px]"
        onClick={() => onPreview?.()}
      >
        打开页面
      </Button>
    </div>
  );
}
