// frontend/components/automation/SuggestView.tsx — auto.jsx SuggestView 이식
"use client";
import { Icon } from "@/components/Icon";
import type { SuggestionOut } from "@/lib/types";
import { Flow } from "./Flow";

export function SuggestView({
  suggests,
  accept,
  dismiss,
}: {
  suggests: SuggestionOut[];
  accept: (s: SuggestionOut) => void;
  dismiss: (s: SuggestionOut) => void;
}) {
  return (
    <div className="board">
      <section className="card sp2">
        <div className="ch">
          <div className="ico">
            <Icon name="brain" />
          </div>
          <div className="htext">
            <h3>아리 제안</h3>
            <div className="sub">반복 패턴을 발견했어요</div>
          </div>
          <span className="count">{suggests.length}건</span>
        </div>
        <div className="sg">
          {suggests.map((s) => (
            <div className="sg-card" key={s.id}>
              <div className="sg-pat">
                <Icon name="spark" />
                <span>{s.pattern}</span>
              </div>
              <div className="sg-offer">
                <div className="sg-name">{s.offer_name}</div>
                <Flow small p={s.offer} />
              </div>
              <div className="sg-btns">
                <button className="sg-yes" onClick={() => accept(s)}>
                  <Icon name="plus" />규칙 만들기
                </button>
                <button className="sg-no" onClick={() => dismiss(s)}>
                  무시
                </button>
              </div>
            </div>
          ))}
          {suggests.length === 0 && (
            <div className="sg-empty">
              <Icon name="tick" />지금은 새 제안이 없어요. 패턴이 보이면 알려드릴게요.
            </div>
          )}
        </div>
      </section>
    </div>
  );
}