<script>
import jscookie from "js-cookie"
import SquareCard from "~/components/atoms/card/SquareCard";
import PlainLabel from "~/components/atoms/label/PlainLabel";

export default {
  components: {PlainLabel, SquareCard},
  props: {
    period: {type: String},
    additional_content: {type: Array},
  },
  data: () => ({
    spot: JSON.parse(jscookie.get("selected_spots"))
  })
}
</script>
<template>
  <square-card :has_shadow="false" :has_default_padding="false"
               additional_class="font-size-14" variant="transparent">
    <span class="border-dashed px-5 px-lg-2 pt-2 pb-1  d-inline-block border-primary rounded-lg bg-white">
    <span class="text-center text-lg-left mx-auto d-inline-block">
      <plain-label value="Area  : " :is_bold="true"/>
      <plain-label :value="spot.text"/>
    </span>
      <span class="text-center text-lg-left mx-auto d-inline-block  ml-0 ml-lg-3 ">
      <plain-label value="Periode  : " :is_bold="true"/>
      <plain-label :value="period"/>
    </span>
      <span v-for="item in additional_content" class="text-center text-lg-left d-block d-lg-inline ml-0 ml-lg-3 ">
      <plain-label :value="`${item.text} : `" :is_bold="true"/>
      <plain-label :value="item.text"/>
    </span>
    </span>
  </square-card>

</template>