// frontend/components/dashboard/HeroBriefing.tsx
"use client";
import { Icon } from "@/components/Icon";
import type { IconName } from "@/components/icons/paths";
import type { DashBriefing } from "@/lib/types";
import { CommandInput } from "./CommandInput";

const CHIPS: { icon: IconName; text: string }[] = [
  { icon: "cal", text: "내일 오후 비워줘" },
  { icon: "mail", text: "중요 메일만 요약" },
  { icon: "video", text: "14시 미팅 준비" },
];

export function HeroBriefing({ briefing }: { briefing: DashBriefing }) {
  return (
    <section className="card hero sp2">
      <span className="hero-spark">
        <Icon name="spark" />
        아리 브리핑
      </span>

      {/* briefingNote — 시드 출처 HTML(<b> 강조). 사용자 입력 아님 → 안전. */}
      <p className="brief" dangerouslySetInnerHTML={{ __html: briefing.note ?? "" }} />

      <div className="chips">
        {CHIPS.map((c, i) => (
          <button className="chip" key={i} type="button">
            <Icon name={c.icon} />
            {c.text}
          </button>
        ))}
      </div>

      <CommandInput />
    </section>
  );
}