import { IonButton } from "@ionic/react";
import "./ExploreContainer.css";
import { Drivers, Storage } from "@ionic/storage";
import { useEffect } from "react";
import { useMyIonStore } from "../context/Store";

interface ContainerProps {
  name: string;
}

const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {
  let { myIonStoreRead, myIonStoreWrite } = useMyIonStore();

  return (
    <div className="container">
      <strong>{name}</strong>
      <p>
        Explore{" "}
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://ionicframework.com/docs/components"
        >
          UI Components
        </a>
      </p>
      <IonButton onClick={async () => {}}>create</IonButton>

      <IonButton
        onClick={async () => {
          console.log(await myIonStoreRead("name"));
        }}
      >
        read
      </IonButton>

      <IonButton
        onClick={async () => {
          myIonStoreWrite("name", "123");
        }}
      >
        write
      </IonButton>
    </div>
  );
};

export default ExploreContainer;
