<template>

  <div class="plant-wrapper">
    <img :src="plantStateStore.imageBase64" alt="">
    <div class="loose">
      <h2>What's going to happen to your lovely plant?</h2>
      <condition-description></condition-description>

      <h3>How long is the condition going to last?</h3>
      <InputText placeholder="E.g. 5hrs, 7 days, a month" v-model="plantStateStore.time_period"></InputText>
    </div>
    <div class="precise">
      <condition-details></condition-details>
    </div>
    <div class="footer">
      <Button icon="pi pi-check" label="Submit" aria-label="Home" @click="plantStateStore.sendRequest()"> </Button>
    </div>
  </div>

</template>

<script setup>
import ImageScan from '@/components/imageScan.vue'
import conditionDescription from "@/components/conditionDescription.vue";
import conditionDetails from '@/components/conditionDetails.vue';
import InputText from 'primevue/inputtext';
import Button from 'primevue/button';
import { usePlantStateStore} from "@/stores/plantState.js";

const plantStateStore = usePlantStateStore();

</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Playwrite+HU:wght@100..400&family=Roboto+Flex:opsz,wght@8..144,100..1000&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');


h2 {
  font-family: 'Playwrite HU', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.plant-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: start;
  gap: 2rem;
  overflow-y: scroll;
  width: 100%;
}

.loose {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer {
  display: flex;
  justify-content: flex-end;
}

img {
  max-height: 5rem;
  border-radius: 4px;
  object-fit: cover;
}

h3 {
  margin-top: 1rem;
}
</style>
