// frontend/components/proactive/ProactiveCard.tsx — 능동 카드 한 장
"use client";
import type { CSSProperties } from "react";
import { Icon } from "@/components/Icon";
import type { IconName } from "@/components/icons/paths";
import type { ProactiveCard as ProactiveCardT } from "@/lib/types";

export function ProactiveCard({
  card,
  onAccept,
  onDismiss,
}: {
  card: ProactiveCardT;
  onAccept: (id: string) => void;
  onDismiss: (id: string) => void;
}) {
  const style = { "--tone": `var(--${card.tone})` } as CSSProperties;
  return (
    <div className="pc" style={style}>
      <span className="pc-ic">
        <Icon name={card.icon as IconName} />
      </span>
      <div className="pc-body">
        <div className="pc-title">{card.title}</div>
        <div className="pc-why">{card.why}</div>
      </div>
      <div className="pc-acts">
        {card.cta && (
          <button className="pc-ok" onClick={() => onAccept(card.id)}>
            {card.cta}
          </button>
        )}
        <button className="pc-x" aria-label="이 제안 닫기" onClick={() => onDismiss(card.id)}>
          <Icon name="x" />
        </button>
      </div>
    </div>
  );
}
