"use client";

import { type NodeProps } from "@xyflow/react";
import { PencilIcon, WaypointsIcon } from "lucide-react";
import { NodeShell } from "./NodeShell";

export function ChoiceNode({ data }: NodeProps) {
  const d = data as { question?: string; options?: Array<{ id: string; label: string }> };
  const options = d.options ?? [];

  return (
    <NodeShell
      nodeType="choice"
      className="bg-amber-950/80 border border-amber-500/50 rounded-lg shadow-md min-w-56"
    >
      <div className="flex items-center gap-2 px-3 py-2 border-b border-amber-500/30">
        <WaypointsIcon className="size-4 text-amber-400 shrink-0" />
        <span className="text-sm font-medium text-amber-200 flex-1 truncate">
          {d.question || "Untitled Choice"}
        </span>
        <PencilIcon className="size-3 text-amber-500/60 shrink-0" />
      </div>
      <div className="px-3 py-2 space-y-1">
        {options.length === 0 ? (
          <span className="text-xs text-amber-400/60 italic">No options defined.</span>
        ) : (
          options.map((opt) => (
            <div
              key={opt.id}
              className="flex items-center gap-2 text-xs text-amber-300/80 bg-amber-950/40 rounded px-2 py-1"
            >
              <span className="w-1 h-1 rounded-full bg-amber-400 shrink-0" />
              <span className="flex-1 truncate">{opt.label}</span>
            </div>
          ))
        )}
      </div>
    </NodeShell>
  );
}