// frontend/components/inbox/ClassifyPrinciples.tsx
import type { CSSProperties } from "react";
import { Icon } from "@/components/Icon";
import type { IconName } from "@/components/icons/paths";

const RULES: { icon: IconName; tone: string; title: string; desc: string }[] = [
  {
    icon: "check",
    tone: "green",
    title: "행동이 있으면 → 작업",
    desc: "‘비행기 티켓 사기’도 작업이에요. 작업 트리의 ‘개인 › 여행’ 프로젝트로 들어가 다른 작업과 똑같이 보여요.",
  },
  {
    icon: "cal",
    tone: "blue",
    title: "시간이 정해지면 → 일정",
    desc: "‘수요일 11시 자전거 수리’는 작업이 아니라 캘린더에 바로 등록돼요.",
  },
  {
    icon: "brain",
    tone: "violet",
    title: "막연하면 → 아이디어",
    desc: "행동이 정해지지 않은 생각은 보드에 보관하고, 관련 프로젝트에 연결해둬요.",
  },
  {
    icon: "clock",
    tone: "coral",
    title: "개인은 섹션이 아니라 프로젝트",
    desc: "따로 숨기거나 분리하지 않아요. 같은 작업 트리에서 필터로만 구분하고, 배치만 저녁·주말 빈 시간으로 추천해요.",
  },
];

export default function ClassifyPrinciples() {
  return (
    <section className="card">
      <div className="ch">
        <div className="ico">
          <Icon name="route" />
        </div>
        <div className="htext">
          <h3>아리의 분류 원칙</h3>
          <div className="sub">적을 때 고민하지 마세요</div>
        </div>
      </div>
      <div className="prin-list">
        {RULES.map((r, i) => (
          <div className="prin" key={i} style={{ "--tone": `var(--${r.tone})` } as CSSProperties}>
            <span className="prin-ic">
              <Icon name={r.icon} />
            </span>
            <span className="prin-body">
              <span className="prin-title">{r.title}</span>
              <span className="prin-desc">{r.desc}</span>
            </span>
          </div>
        ))}
      </div>
    </section>
  );
}