// frontend/components/notify/SenderRules.tsx — 발신자 규칙 (점·who·from·rule + 안내 노트)
"use client";
import { Icon } from "@/components/Icon";
import type { SenderRule } from "@/lib/types";

export function SenderRules({ senders }: { senders: SenderRule[] }) {
  return (
    <div className="board">
      <section className="card sp2">
        <div className="ch">
          <div className="ico">
            <Icon name="users" />
          </div>
          <div className="htext">
            <h3>발신자 규칙</h3>
            <div className="sub">누구는 바로, 누구는 모아서</div>
          </div>
          <span className="count">{senders.length}개</span>
        </div>
        <div className="sd-list">
          {senders.map((s) => (
            <div className="sd-row" key={s.id}>
              <span className="sd-dot" style={{ background: `var(--${s.tone})` }} />
              <div className="sd-who">
                {s.who}
                <span>{s.from}</span>
              </div>
              <span className="sd-rule">{s.rule}</span>
            </div>
          ))}
        </div>
        <div className="sd-note">
          <Icon name="spark" />
          ‘나중에’로 미룬 발신자가 쌓이면 아리가 새 규칙을 제안해요. 자동화 페이지에서 언제든 고칠
          수 있어요.
        </div>
      </section>
    </div>
  );
}