<script setup lang="ts">
import { ref } from 'vue';
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonAvatar, IonButton, IonIcon } from '@ionic/vue';
import { playOutline, statsChartOutline, personOutline } from 'ionicons/icons';
import img from '../assets/groot.jpg'

const userImage = ref('../assets/groot.jpg'); // Replace with actual user image URL

const startBullpen = () => {
  console.log('Starting bullpen session');
};

const showStats = () => {
  console.log('Showing bullpen stats');
};

const showProfile = () => {
  console.log('Showing profile');
};
</script>

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>User Home</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="ion-padding">
      <div class="user-container">
        <ion-avatar class="user-avatar">
          <img :src="img" alt="User Profile" class="avatar-frame" />
        </ion-avatar>
      </div>

      <div class="button-container">
        <ion-button expand="full" @click="startBullpen" class="full-width">
          <ion-icon :icon="playOutline" slot="start" />
          Start Bullpen Session
        </ion-button>
        <ion-button expand="full" @click="showStats" class="full-width">
          <ion-icon :icon="statsChartOutline" slot="start" />
          Show Bullpen Stats
        </ion-button>
        <ion-button expand="full" @click="showProfile" class="full-width">
          <ion-icon :icon="personOutline" slot="start" />
          Show Profile
        </ion-button>
      </div>
    </ion-content>
  </ion-page>
</template>

<style scoped>
.user-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30vh;
  background-color: #f0f0f0; /* Change background color of top area */
}

.user-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid #ccc;
  overflow: hidden;
}

.avatar-frame {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.button-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 60vh;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: 20px;
}

.full-width {
  width: 100%;
  justify-content: center;
}
</style>