content-find-agent-new/web2/components/BusinessDrawer.tsx

"use client";

import { X } from "lucide-react";
import type { BusinessSection } from "@/lib/flow-ledger/business";

export type BusinessDrawerState = {
  title: string;
  sections: BusinessSection[];
} | null;

export function BusinessDrawer({ drawer, onClose }: { drawer: BusinessDrawerState; onClose: () => void }) {
  return (
    <>
      <button
        className={`drawer-overlay ${drawer ? "open" : ""}`}
        type="button"
        aria-label="关闭抽屉"
        onClick={onClose}
      />
      <aside className={`drawer ${drawer ? "open" : ""}`} aria-hidden={!drawer}>
        <header>
          <h2>{drawer?.title || "详情"}</h2>
          <button className="drawer-close" type="button" aria-label="关闭" onClick={onClose}>
            <X size={17} />
          </button>
        </header>
        <div className="drawer-content business-drawer-content">
          {drawer?.sections.map((section) => (
            <section className={`drawer-section ${section.tone || "neutral"}`} key={section.label}>
              <h3>{section.label}</h3>
              {section.value ? <p>{section.value}</p> : null}
              {section.items?.length ? (
                <ul>
                  {section.items.map((item) => (
                    <li key={item}>{item}</li>
                  ))}
                </ul>
              ) : null}
            </section>
          ))}
        </div>
      </aside>
    </>
  );
}