// frontend/components/mail/Sug.tsx — 아리 제안 항목 (할 일 / 일정)
"use client";
import type { ReactNode } from "react";
import { Icon } from "@/components/Icon";

export function Sug({
  kind,
  text,
  meta,
  added,
  onAdd,
}: {
  kind: "task" | "event";
  text: string;
  meta: ReactNode;
  added: boolean;
  onAdd: () => void;
}) {
  return (
    <div className={"sug " + kind + (added ? " added" : "")}>
      <div className="sug-ico">
        <Icon name={kind === "task" ? "check" : "cal"} />
      </div>
      <div className="sug-main">
        <div className="sug-text">{text}</div>
        <div className="sug-meta">{meta}</div>
      </div>
      <button className={"sug-add" + (added ? " done" : "")} onClick={onAdd}>
        <Icon name={added ? "tick" : "plus"} w={added ? 3 : 1.9} />
        {added ? "추가됨" : kind === "task" ? "작업" : "일정"}
      </button>
    </div>
  );
}