<template>

  <div class="plant-wrapper">
    <img :src="plantStateStore.imageBase64" alt="">
    <div class="loose">
      <h2>Talk to us about your plant</h2>
      <text-description></text-description>
    </div>
    <div class="precise">
      <plant-details></plant-details>
    </div>
    <div class="footer">
      <Button label="Simulate your plant" icon="pi pi-chart-line" size="large" @click="$router.push('/setEnvironment')"/>
      <Button label="Get care suggestions" icon="pi pi-heart"  size="large" @click="$router.push('/cure')"/>
    </div>
  </div>

</template>

<script setup>
import ImageScan from '@/components/imageScan.vue'
import textDescription from "@/components/textDescription.vue";
import plantDetails from '@/components/plantDetails.vue';
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: stretch;
  gap: 1rem;
  width: 100%;
}

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