Kuma/src/modules/marketing/ui/components/flow/EmailNode.tsx

"use client";

import { Handle, Position, type NodeProps } from "@xyflow/react";
import { Gift } from "lucide-react";
import { cn } from "@/src/lib/utils";
import { emailConfigSchema, formatRewardValue } from "../../../lib/node-config";
import type { EmailFlowNode } from "./flow-model";
import { NODE_ICONS } from "./trigger-icons";

const EmailNode = ({ data, selected }: NodeProps<EmailFlowNode>) => {
  const parsed = emailConfigSchema.safeParse(data.config);
  const config = parsed.success ? parsed.data : null;
  const name = typeof data.config.name === "string" ? data.config.name : "";
  const subject = typeof data.config.subject === "string" ? data.config.subject : "";
  const Icon = NODE_ICONS.email;

  return (
    <div
      className={cn(
        "w-64 rounded-xl border bg-white p-3 shadow-sm",
        selected
          ? "border-gray-900 ring-2 ring-gray-900/10"
          : config
            ? "border-gray-200"
            : "border-red-300"
      )}
    >
      <Handle
        type="target"
        position={Position.Left}
        className="size-3! border-2! border-white! bg-gray-900!"
      />
      <div className="flex items-start gap-2.5">
        <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-sky-100 text-sky-700">
          <Icon className="size-4" />
        </span>
        <div className="min-w-0 flex-1">
          <p className="text-[11px] font-medium uppercase tracking-wide text-gray-400">E-Mail</p>
          <p className="truncate text-sm font-semibold text-gray-900">{name || "Ohne Namen"}</p>
          <p className="truncate text-xs text-gray-500">{subject || "Kein Betreff"}</p>
        </div>
      </div>
      <div className="mt-2 flex items-center justify-between gap-2 text-xs">
        {config?.reward ? (
          <span className="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2 py-0.5 text-amber-800">
            <Gift className="size-3" />
            {formatRewardValue(config.reward)} · {config.reward.validDays} Tage
          </span>
        ) : (
          <span className={config ? "text-gray-400" : "text-red-600"}>
            {config ? "Ohne Rabatt" : "Unvollständig"}
          </span>
        )}
        <span className="text-gray-500">
          {data.sent} verschickt
          {config?.reward ? ` · ${data.redeemed} eingelöst` : ""}
        </span>
      </div>
    </div>
  );
};

export default EmailNode;