import { Info } from "react-feather";
import { Link } from "react-router-dom";

type InfoMenuProps = {
  sessionQuery?: string;
};

export function InfoMenu({ sessionQuery = "" }: InfoMenuProps) {
  const ratingsLink = `/info/ratings${sessionQuery}`;
  return (
    <details className="relative no-print">
      <summary className="list-none">
        <span className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-50 transition cursor-pointer">
          <Info className="h-4 w-4" />
          Info
        </span>
      </summary>
      <div className="absolute right-0 mt-2 w-80 rounded-lg border border-gray-200 bg-white shadow-lg p-3 z-20">
        <div className="text-xs font-semibold text-gray-900 mb-2">
          RepEx quick guidance
        </div>
        <ul className="space-y-2 text-xs text-gray-600">
          <li>
            Workflow: Upload → Review → Input Data → Report Viewer → Edit →
            Export.
          </li>
          <li>
            Edit Report is for free‑form layout changes; Input Data updates the
            structured fields.
          </li>
          <li>
            Category and Priority values use the defined rating scales.
          </li>
          <li>
            <Link
              to={ratingsLink}
              className="text-blue-600 hover:text-blue-700 underline"
            >
              View rating scale tables
            </Link>
          </li>
        </ul>
      </div>
    </details>
  );
}