// frontend/components/inbox/SmartInbox.tsx
"use client";
import { Icon } from "@/components/Icon";
import type { Sphere, UiInboxItem } from "@/lib/types";
import CaptureComposer from "./CaptureComposer";
import CaptureRow from "./CaptureRow";
import SphereFilters from "./SphereFilters";

export default function SmartInbox({
  items,
  todayRouted,
  filter,
  onFilter,
  onSubmit,
  onConfirm,
  onReType,
}: {
  items: UiInboxItem[];
  todayRouted: number;
  filter: "all" | Sphere;
  onFilter: (f: "all" | Sphere) => void;
  onSubmit: (raw: string, kind: "text" | "voice" | "image") => void;
  onConfirm: (id: string) => void;
  onReType: (id: string) => void;
}) {
  return (
    <section className="card sbox sp2">
      <div className="ch">
        <div className="ico">
          <Icon name="inbox" />
        </div>
        <div className="htext">
          <h3>스마트 인박스</h3>
          <div className="sub">업무든 일상이든 일단 적기 — 분류는 아리가 해요</div>
        </div>
        <span className="count">오늘 {todayRouted}건 정리</span>
      </div>

      <CaptureComposer onSubmit={onSubmit} />
      <SphereFilters filter={filter} onFilter={onFilter} />

      <div className="sb-list">
        {items.length === 0 ? (
          <div className="sb-empty">
            아직 비어 있어요. 위에 아무거나 적어보세요 — 분류는 아리가 할게요.
          </div>
        ) : (
          items.map((c) => (
            <CaptureRow key={c.id} item={c} onConfirm={onConfirm} onReType={onReType} />
          ))
        )}
      </div>
    </section>
  );
}