"use client";
import { memo } from "react";
import { NodeShell } from "./NodeShell";
import { KIND_META } from "./nodeTypes";

export const WaitNode = memo(function WaitNode({ id, selected, data }: any) {
  const m = KIND_META.wait;
  const mins = data.delayMinutes ?? 60;
  const label = mins >= 1440
    ? `${Math.round(mins / 1440)} day${Math.round(mins / 1440) !== 1 ? "s" : ""}`
    : mins >= 60
    ? `${Math.round(mins / 60)} hour${Math.round(mins / 60) !== 1 ? "s" : ""}`
    : `${mins} min`;

  return (
    <NodeShell id={id} selected={selected} color={m.color} border={m.border} analytics={data.analytics}>
      <div className={`bg-gradient-to-r ${m.gradient} px-4 py-2.5 rounded-t-[14px] flex items-center gap-2`}>
        <span className="text-lg">{m.icon}</span>
        <div className="flex-1 min-w-0">
          <p className="text-white font-bold text-[12px] truncate">{data.label}</p>
          <p className="text-white/70 text-[10px]">{m.label}</p>
        </div>
      </div>
      <div className="bg-white px-4 py-3 rounded-b-[14px]" style={{ width: 220 }}>
        <div className="flex items-center gap-2 bg-slate-50 rounded-xl px-3 py-2 border border-slate-100">
          <span className="text-xl">⏰</span>
          <div>
            <p className="text-[13px] font-black text-slate-700">{label}</p>
            <p className="text-[10px] text-slate-400">then continue</p>
          </div>
        </div>
      </div>
    </NodeShell>
  );
});
