import { Box } from '@mui/material';
import { Handle, Position, type NodeProps } from '@xyflow/react';

export default function NoteNode({ data }: NodeProps) {
  const text = (data as any)?.form?.text || '';
  const name = (data as any)?.name || 'Note';
  return (
    <Box sx={{ p: 1.25, bgcolor: 'background.paper', border: '1px dashed', borderColor: 'divider', borderRadius: 1.5, minWidth: 240 }}>
      <Box sx={{ fontSize: 12, color: 'text.secondary', mb: 0.5 }}>{name}</Box>
      <Box sx={{ fontSize: 13, lineHeight: 1.5, maxHeight: 120, overflow: 'auto' }}>{String(text)}</Box>
      <Handle type="target" position={Position.Left} id="left" />
      <Handle type="source" position={Position.Right} id="right" />
    </Box>
  );
}