"use client";

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

const GAME_DATA_FIELDS = [
  { value: "structure_health", label: "Structure Health" },
  { value: "structure_storage", label: "Structure Storage" },
  { value: "deliveries_pending", label: "Pending Deliveries" },
  { value: "deliveries_completed", label: "Completed Deliveries" },
  { value: "resources_total", label: "Total Resources" },
  { value: "faction_reputation", label: "Faction Reputation" },
  { value: "player_count", label: "Player Count" },
  { value: "tick_count", label: "Current Tick" },
];

export function GameDataNode({ data }: NodeProps) {
  const d = data as { field?: string };
  const fieldLabel = GAME_DATA_FIELDS.find((f) => f.value === d.field)?.label ?? "Select field";

  return (
    <NodeShell
      nodeType="gameData"
      className="bg-indigo-950/80 border border-indigo-500/50 rounded-lg shadow-md min-w-44"
    >
      <div className="flex items-center gap-2 px-3 py-2 border-b border-indigo-500/30">
        <DatabaseIcon className="size-4 text-indigo-400 shrink-0" />
        <span className="text-sm font-medium text-indigo-200 flex-1 truncate">Game Data</span>
      </div>
      <div className="px-3 py-2 text-xs text-indigo-300/80">{fieldLabel}</div>
    </NodeShell>
  );
}