import {
  IonButton,
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
} from "@ionic/react";
import ExploreContainer from "../components/ExploreContainer";
import "./Tab1.css";
import useSound from "use-sound";
import boopSfx from "./keyboard.mp3";

const BoopButton = () => {
  // const [play] = useSound("./keyboard.mp3");
  const [play] = useSound("/keyboard.mp3");

  return <IonButton onClick={play}>Boop!1</IonButton>;
};

const Tab1: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 1</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Tab 1</IonTitle>
          </IonToolbar>
        </IonHeader>
        {/* <ExploreContainer name="Tab 1 page" /> */}
        <BoopButton />
      </IonContent>
    </IonPage>
  );
};

export default Tab1;
