'use client';

import { Handle, Position } from '@xyflow/react';

interface ButtonNodeData {
  text?: string;
  action?: string;
  target?: string;
  [key: string]: unknown;
}

export function ButtonNode({ data }: { data: ButtonNodeData }) {
  const text = data.text ?? 'Кнопка';
  const action = data.action ?? 'goto';
  const target = data.target ?? '';

  const targetLabel =
    action === 'goto' && target
      ? target
      : action === 'url'
        ? '🔗 ссылка'
        : action === 'share_contact'
          ? '📞 контакт'
          : '';

  return (
    <div
      className="rounded-lg border-2 border-[#42a5f5] bg-[#e3f2fd] shadow-sm text-center px-2 py-1"
      style={{ width: 130, minHeight: 44 }}
    >
      <Handle
        type="target"
        position={Position.Top}
        id="target-top"
        className="!bg-[#42a5f5] !w-2 !h-2"
      />
      <p className="text-[11px] font-semibold text-[#1565c0] leading-tight line-clamp-2">{text}</p>
      {targetLabel && <p className="text-[8px] text-[#90caf9] mt-0.5 truncate">→ {targetLabel}</p>}
      <Handle
        type="source"
        position={Position.Bottom}
        id="source-bottom"
        className="!bg-[#42a5f5] !w-2 !h-2"
      />
    </div>
  );
}
