diagram.tsx

import React from 'react';
import Diagram, { createSchema, useSchema } from 'beautiful-react-diagrams';

// Define the types manually
type CustomNode = {
  id: string;
  content: React.ReactNode;
  coordinates: [number, number];
};

type CustomLink = {
  input: string;
  output: string;
};

type CustomSchema = {
  nodes: CustomNode[];
  links: CustomLink[];
};

// the diagram model
const initialSchema: CustomSchema = {
  nodes: [
    { id: 'sh', content: 'Stakeholders', coordinates: [500, 110] },
    { id: 'aca', content: 'Academia', coordinates: [250, 60] },
    { id: 'ind', content: 'Industry', coordinates: [250, 160] },
    { id: 'pat', content: 'Patients', coordinates: [750, 60] },
    { id: 'meds', content: 'Medical Professionals', coordinates: [750, 160] },
    /* { id: 'soc', content: 'Society', coordinates: [500, 20] }, */
/*     { id: 'pat', content: 'Patients', coordinates: [500, 210] }, */
  ],
  links: [
    { input: 'sh', output: 'aca' },
    { input: 'sh', output: 'ind' },
    { input: 'sh', output: 'pat' },
    { input: 'sh', output: 'meds' },
    /* { input: 'sh', output: 'soc' },
    { input: 'sh', output: 'meds' }, */
  ],
};

const UncontrolledDiagram: React.FC = () => {
  // create diagrams schema
  const [schema, { onChange }] = useSchema(createSchema(initialSchema));

  return (
    <div className='center'>
      <div className='diagram-hp'>
        <Diagram schema={schema} onChange={onChange} />
      </div>
    </div>

   
  );
};

export default UncontrolledDiagram;