// frontend/components/automation/Flow.tsx — auto.jsx Flow 이식
import { Icon } from "@/components/Icon";
import type { Flow as FlowType } from "@/lib/types";

export function Flow({ p, small }: { p: FlowType; small?: boolean }) {
  return (
    <div className={"fl" + (small ? " rl-flow" : "")}>
      <span className="fl-chip tg">
        <span className="k">트리거</span>
        <span className="v">{p.trigger}</span>
      </span>
      {p.cond && (
        <>
          <span className="fl-arr">
            <Icon name="arrow" />
          </span>
          <span className="fl-chip cd">
            <span className="k">조건</span>
            <span className="v">{p.cond}</span>
          </span>
        </>
      )}
      <span className="fl-arr">
        <Icon name="arrow" />
      </span>
      <span className="fl-chip ac">
        <span className="k">동작</span>
        <span className="v">{p.action}</span>
      </span>
    </div>
  );
}

export const AU_TONE: Record<string, string> = {
  mail: "var(--blue)",
  cal: "var(--violet)",
  focus: "var(--coral)",
  life: "var(--green)",
};
export const AU_CAT: Record<string, string> = {
  mail: "메일",
  cal: "일정",
  focus: "집중",
  life: "라이프",
};