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

export const EndNode = memo(function EndNode({ id, selected, data }: any) {
  const m = KIND_META.end;
  return (
    <NodeShell id={id} selected={selected} color={m.color} border={m.border} analytics={data.analytics} noSource>
      <div className={`bg-gradient-to-r ${m.gradient} px-4 py-3 rounded-2xl flex items-center gap-3`}>
        <div className="w-9 h-9 rounded-xl bg-white/20 flex items-center justify-center text-xl flex-shrink-0">
          {m.icon}
        </div>
        <div className="flex-1 min-w-0">
          <p className="text-white font-bold text-[13px] truncate">{data.label}</p>
          <p className="text-white/70 text-[10px]">End of journey</p>
        </div>
        <span className="flex-shrink-0 px-2 py-1 rounded-full bg-white/20 text-white text-[9px] font-bold">
          END
        </span>
      </div>
    </NodeShell>
  );
});
