export const Modal: React.FC = () => {
  const [showModal, setShowModal] = useState(false);

  return (
    <IonContent>
      <IonModal isOpen={showModal}>
        <Slides />
        <IonButton onClick={() => setShowModal(false)}>Close Modal</IonButton>
      </IonModal>
      <IonButton onClick={() => setShowModal(true)}>Try it in Modal</IonButton>
    </IonContent>
  );
};

const Slide: React.FC<{ n: number }> = ({ n }) => (
  <IonSlide>
    <div className="ion-padding">
      <h1>Slide {n}</h1>
    </div>
  </IonSlide>
);

const Slides: React.FC = () => {
  return (
    <IonSlides pager={true}>
      <Slide n={1} />
      <Slide n={2} />
      <Slide n={3} />
    </IonSlides>
  );
};

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonContent>
        <Modal />
      </IonContent>
    </IonPage>
  );
};