import { NodeViewWrapper, NodeViewProps } from '@tiptap/react';

function getTypeColor(type: string): string {
  switch (type) {
    case 'string':
      return 'bg-blue-100 text-blue-800 border-blue-200';
    case 'integer':
      return 'bg-green-100 text-green-800 border-green-200';
    case 'boolean':
      return 'bg-purple-100 text-purple-800 border-purple-200';
    case 'datetime':
      return 'bg-orange-100 text-orange-800 border-orange-200';
    case 'array':
      return 'bg-gray-100 text-gray-800 border-gray-200';
    default:
      return 'bg-gray-100 text-gray-800 border-gray-200';
  }
}

export function VariableChip({ node, selected }: NodeViewProps) {
  const { path, label, type } = node.attrs;

  return (
    <NodeViewWrapper
      as="span"
      className={`inline-flex items-center gap-1 px-1.5 py-0.5 mx-0.5 rounded
        bg-cyan-50 border border-slate-300 text-sm
        ${selected ? 'ring-2 ring-cyan-600 ring-offset-1' : ''}
        cursor-default select-none`}
      contentEditable={false}
    >
      <span className="text-slate-900 truncate max-w-[150px]" title={`{{${path}}}`}>
        {label || path}
      </span>
      <span
        className={`text-[10px] px-1 py-0 rounded-full border font-semibold ${getTypeColor(type)}`}
      >
        {type}
      </span>
    </NodeViewWrapper>
  );
}