<template>
  <div style="padding-bottom: 10px">
    <div class="vb-body-right-option pointer option-head">Color</div>

    <!-- <div class="container vb-p-10" v-if="widgetType[selectedWidget].type == 'widimage'">
            <div class="row">
                <div class="col-md-6">
                    <div><span class="font-12">Background Color</span></div>
                    <div>
                        <colorpicker :color="widgetType[selectedWidget].style.backgroundcolor" v-model="widgetType[selectedWidget].style.backgroundcolor" />
                    </div>
                </div>

            </div>
    </div>-->
    <div class="container">
      <!--      <div class="row">-->
      <!--        <div class="col-md-6">-->
      <!--          <span class="font-12">Image Link</span>-->
      <!--        </div>-->
      <!--      </div>-->
      <div class="row">
        <div class="col-md-6" v-if="widgetStyle.textcolor">
          <div>
            <span class="font-12 right-45">Text Color</span>
          </div>
          <ColorPicker
            class="right-45"
            :color="widgetStyle.textcolor"
            v-model="widgetStyle.textcolor"
          />
        </div>
        <div class="col-md-6" v-if="widgetStyle.backgroundcolor">
          <div>
            <span class="font-12">Background Color</span>
          </div>
          <div>
            <ColorPicker
              :color="widgetStyle.backgroundcolor"
              v-model="widgetStyle.backgroundcolor"
            />
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6" v-if="widgetStyle.texthovercolor">
          <div>
            <span class="font-12 right-45">Hover Color</span>
          </div>
          <ColorPicker
            class="right-45"
            :color="widgetStyle.texthovercolor"
            v-model="widgetStyle.texthovercolor"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ColorPicker from "./common/color-picker";
export default {
  props: {
    widgetStyle: Object,
  },
  components: {
    ColorPicker,
  },
  data() {
    return {};
  },
};
</script>

<style></style>
