<template>
  <div>
    <v-select
      :items="fontFamily"
      v-model="data.fontFamily"
      label="Font Family"
      outlined
      dense
    ></v-select>

    <v-text-field
      v-model="data.fontSize"
      label="Font Size"
      hide-details="auto"
      dense
      outlined
    ></v-text-field>
    <v-spacer class="mb-6" />
    <v-select
      :items="textAlignment"
      v-model="data.textAlignment"
      label="Text Alignment"
      outlined
      dense
    ></v-select>

    <v-select
      :items="fontWeight"
      v-model="data.fontWeight"
      label="Font Weight"
      outlined
      dense
    ></v-select>

    <color-selector
      label="Text Color"
      :color="data.textColor"
      @color="data.textColor = $event"
    />
    <v-spacer class="mb-6" />
    <padding-option
      :all-sides="data.padding"
      :fieldValues="{
        name: 'Padding',
        top: 'top',
        bottom: 'bottom',
        left: 'left',
        right: 'right',
      }"
    />
  </div>
</template>

<script>
import PaddingOption from "@/components/properties/components/PaddingOption";
import ColorSelector from "@/components/properties/components/ColorSelector";
export default {
  name: "TextHeadingStyle",
  components: { ColorSelector, PaddingOption },
  props: { data: Object },
  data() {
    return {
      fontFamily: [
        {
          value: "Montserrat, sans-serif",
          text: "Montserrat",
        },
        {
          value: "courier-prime, monospace",
          text: "Courier-prime",
        },
        {
          value: "open-sans, sans-serif",
          text: "Open-sans",
        },
      ],
      fontWeight: [
        {
          value: "normal",
          text: "normal",
        },
        {
          value: "bold",
          text: "bold",
        },
        {
          value: "lighter",
          text: "lighter",
        },
      ],
      textAlignment: [
        {
          value: "left",
          text: "left",
        },
        {
          value: "center",
          text: "center",
        },
        {
          value: "right",
          text: "right",
        },
      ],
    };
  },
};
</script>

<style scoped></style>
