import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
} from "@ionic/react";
import DropdownComponent from "../components/DropdownComponent";
import "../types";

const categories = [
  {
    name: "Paternidad",
    listItems: ["Consejo de Paternidad 1", "Consejo de Paternidad 2"],
  },
  {
    name: "Abuso Sexual",
    listItems: ["Consejo de Abuso Sexual 1", "Consejo de Abuso Sexual 2"],
  },
];

const AdviceListPage: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Consejos</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Consejos</IonTitle>
          </IonToolbar>
        </IonHeader>

        <DropdownComponent category={categories} />
      </IonContent>
    </IonPage>
  );
};

export default AdviceListPage;