import { Drawer, Box, Typography, Divider } from '@mui/material';

export interface NodeDrawerProps {
  open: boolean;
  node: any | null;
  onClose: () => void;
}

export default function NodeDrawer({ open, node, onClose }: NodeDrawerProps) {
  const label = node?.data?.label || '';
  const name = node?.data?.name || '';
  const type = node?.type || 'default';
  const form = node?.data?.form ?? {};

  return (
    <Drawer anchor="right" open={open} onClose={onClose}>
      <Box sx={{ width: '45vw', p: 2 }}>
        <Typography variant="h6" fontWeight={600} gutterBottom>
          {`${label}${name ? ' · ' + name : ''}`}
        </Typography>
        <Divider sx={{ mb: 2 }} />
        <Typography variant="body2" color="text.secondary" gutterBottom>
          节点类型：{type}
        </Typography>
        <Divider sx={{ my: 2 }} />
        <Typography variant="subtitle2" gutterBottom>
          表单数据
        </Typography>
        <Box component="pre" sx={{ fontSize: 12, whiteSpace: 'pre-wrap', wordBreak: 'break-word', p: 1, bgcolor: 'action.hover', borderRadius: 1 }}>
          {JSON.stringify(form, null, 2)}
        </Box>
      </Box>
    </Drawer>
  );
}