<template>
    <div class="container" v-if="title">
      <div class="text-container">
        <div class="bs-font-medium-2-bold title">{{ title }}</div>
        <div class="bs-font-medium-2-normal strategy">{{ strategy }}</div>
      </div>
      <div class="separator"></div>
      <div class="icon-container" @click="deleteVariable">
        <q-icon name="mdi-delete-outline" />
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent } from "vue";

  export default defineComponent({
    props: {
      title: String,
      strategy: String,
    },
    emits:["delete-variable"],
    methods: {
      deleteVariable() {
        this.$emit('delete-variable');
      },
    },
  });
  </script>
  
  <style scoped>
.container {
    color: var(--text-and-icons-bs-color-text, #333E48);
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}
.container:not(:last-child){
  margin-bottom: 8px;
}

.text-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-right: 16px;
  justify-content: center; /* Center the title and strategy vertically */
}

.separator {
  width: 1px;
  background-color: grey;
  margin: 0 16px; /* Adjusted to remove height, it will take the full height of its parent .container */
}

.icon-container {
  display: flex;
  align-items: center;
  cursor: pointer;
}
</style>