import { KaotoForm } from '@kaoto/forms';

const schema = {
  type: 'object',
  properties: {
    name: {
      type: 'string',
      title: 'Name',
      description: 'The name of the integration',
    },
    description: {
      type: 'string',
      title: 'Description',
      description: 'A brief description of the integration',
    },
    // Add more properties as needed
  },
};

const model = {
  name: 'My Integration',
  description: 'This is a sample integration',
  // Add more properties as needed
};

const handleOnChangeIndividualProp = (path: string, value: unknown) => {
  console.log(`Property ${prop} changed to ${value}`);
  // Handle the change event as needed
};

const onChange = (value: unknown) => {
  console.log('Form changed:', value);
  // Handle the form change event as needed
};

<KaotoForm
  schema={schema}
  model={model}
  onChangeProp={handleOnChangeIndividualProp}
  onChange={onChange}
/>