import {
  IonContent,
  IonHeader,
  IonItem,
  IonList,
  IonPage,
  IonTitle,
  IonToolbar,
} from "@ionic/react";
import ListComponent from "../components/ListComponent";

const AboutListPage: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>About</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">About</IonTitle>
          </IonToolbar>
        </IonHeader>
        <div className="ion-padding">
          <h5>Bienvenidos</h5>
          <p>
            Aqui tenemos una lista de las cosas que Renacer Social ofrece a la
            sociedad.
          </p>
        </div>
      </IonContent>
      <IonList>
        <IonItem routerLink={`/services/casita`}>
          <p className="ListItemText">Casita de Paz</p>
        </IonItem>
      </IonList>

      <IonList>
        <IonItem routerLink={`/services/Crecemos`}>
          <p className="ListItemText">Crecemos</p>
        </IonItem>
      </IonList>

      <IonList>
        <IonItem routerLink={`/services/Lazos`}>
          <p className="ListItemText">Proyecto Lazos</p>
        </IonItem>
      </IonList>

      <IonList>
        <IonItem routerLink={`/services/Supervisadas`}>
          <p className="ListItemText">Visitas Supervisadas</p>
        </IonItem>
      </IonList>
    </IonPage>
  );
};

export default AboutListPage;