// SlotExampleComponent.tsx

import * as React from 'react';
import { withSlots } from 'react-slot-component';

export type SlotExampleComponentProps = {};

// Describe you future slots name with props

export type SlotExampleComponentSlots = {
  SlotOne: {
    children: React.ReactNode;
    slotOneProp1: string;
    slotOneProp2: string;
  };
  SlotTwo: {
    children: React.ReactNode;
    slotTwoProp1: string;
    slotTwoProp2: string;
  };
};

export const SlotExampleComponent = withSlots<
  SlotExampleComponentSlots,
  SlotExampleComponentProps
>(props => {
  const {
    children,
    // All future slot props passed via slotProps prop
    slotProps,
  } = props;

  return (
    <div>
      {slotProps.SlotOne ? (
        <div>
          <div>{slotProps.SlotOne.slotOneProp1}</div>
          <div>{slotProps.SlotOne.slotOneProp2}</div>
          <div>{slotProps.SlotOne.children}</div>
        </div>
      ) : (
        <div data-test="SlotOneDefaultContent">SlotOneDefaultContentValue</div>
      )}
      {slotProps.SlotTwo ? (
        <div>
          <div>{slotProps.SlotTwo.slotTwoProp1}</div>
          <div>{slotProps.SlotTwo.slotTwoProp2}</div>
          <div>{slotProps.SlotTwo.children}</div>
        </div>
      ) : (
        <div>SlotTwoDefaultContentValue</div>
      )}

      {children}
    </div>
  );
});

// App.tsx
import React from 'react';

import { SlotExampleComponent } from './SlotExampleComponent';

export const App = () => {
  return (
    <SlotExampleComponent {...args}>
      <SlotExampleComponent.SlotOne
        slotOneProp1="slotOneProp1Value"
        slotOneProp2="slotOneProp2Value"
      >
        SlotOneChildrenValue
      </SlotExampleComponent.SlotOne>
      <SlotExampleComponent.SlotTwo
        data-test="SlotTwo"
        slotTwoProp1="slotTwoProp1Value"
        slotTwoProp2="slotTwoProp2Value"
      >
        SlotTwoChildrenValue
      </SlotExampleComponent.SlotTwo>
      SlotExampleChildrenValue
    </SlotExampleComponent>
  );
};