"use client";

import { useState } from "react";
import type { Citation } from "@duoc-thu/shared-types";
import { ChatPanel } from "../_components/ChatPanel";

export default function TraCuuPage() {
  const [pdfSrc, setPdfSrc] = useState("/api/pdf");

  function handleCitationClick(citation: Citation) {
    const [page] = citation.sourcePageRange;
    setPdfSrc(`/api/pdf#page=${page}`);
  }

  return (
    <div className="flex w-full max-w-7xl flex-col gap-4 lg:flex-row lg:items-stretch">
      <div className="min-h-[32rem] flex-[1.2] overflow-hidden rounded-2xl border bg-card shadow-sm">
        <iframe
          key={pdfSrc}
          src={pdfSrc}
          title="Dược thư quốc gia Việt Nam 2018"
          className="h-full min-h-[32rem] w-full"
        />
      </div>
      <ChatPanel className="flex-1" onCitationClick={handleCitationClick} />
    </div>
  );
}