frontend/src/CustomNode.tsx

import { Handle, Position, type NodeProps, type Node } from '@xyflow/react';
import { clsx } from 'clsx';
import { CheckCircle2, Circle, Clock } from 'lucide-react';

type NodeData = {
  label: string;
  status: 'pending' | 'in_progress' | 'completed';
  description?: string;
  links?: { title: string; url: string }[];
};

// We need to extend NodeProps to include our specific data type
export function CustomNode({ data }: NodeProps<Node<NodeData>>) {
  const statusColors = {
    pending: 'bg-gray-100 border-gray-300 text-gray-500',
    in_progress: 'bg-blue-50 border-blue-400 text-blue-700',
    completed: 'bg-green-50 border-green-400 text-green-700',
  };

  const status = (data.status as keyof typeof statusColors) || 'pending';

  const StatusIcon = {
    pending: Circle,
    in_progress: Clock,
    completed: CheckCircle2,
  }[status];

  return (
    <div className={clsx(
      "px-4 py-2 rounded-lg border-2 shadow-sm min-w-[150px] transition-all bg-white",
      statusColors[status]
    )}>
      <Handle type="target" position={Position.Top} className="w-3 h-3 !bg-gray-400" />
      
      <div className="flex items-center gap-2">
        <StatusIcon className="w-4 h-4" />
        <span className="font-medium text-sm">{data.label}</span>
      </div>
      
      <Handle type="source" position={Position.Bottom} className="w-3 h-3 !bg-gray-400" />
    </div>
  );
}