<template>
  <div class="rounded-xl bg-gray-50 px-6 py-5">
    <div class="flex flex-col">
      <div class="flex flex-col gap-4 mb-4 border-b border-gray-200 pb-4">
        <p class="text-lg font-semibold text-gray-900 border-b border-gray-200 pb-4">
          Grid
        </p>
        <VToggle name="show" v-model="componentData.button.show" title="Show Button"/>
        <input-wrapper
            is-vertical
            field="title"
            label-text="Title *"
            class="w-full mb-4"
            :value="componentData.button.title"
            :limit="100"
        >
          <input
              v-model="componentData.button.title"
              name="title"
              type="text"
              placeholder="Title"
              :maxlength="100"
              class="border-1 border-solid border-gray-300 rounded-lg bg-white w-full"
          />
        </input-wrapper>
        <linked-to
            v-if="componentData?.button"
            label="Link to"
            name="button"
            v-model:type="componentData.button.type"
            v-model:url="componentData.button.url"
            v-model:openInNewTab="componentData.button.open_in_new_tab"
            :sites="sites"
        />
      </div>
      <div>
        <h3 v-if="componentData.content?.label" class="text-base text-gray-900 font-semibold">
          {{ componentData.content.label }}</h3>
        <p v-if="componentData.content?.supportive_text" class="text-gray-600 text-base font-normal mt-2">
          {{ componentData.content.supportive_text }}</p>
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref} from "vue";
import {defaultProps} from "@/components/helpers/defaultProps";
import LinkedTo from "@/components/common/LinkedTo.vue";
import InputWrapper from "@/components/common/InputWrapper.vue";
import VToggle from "@/components/common/Toggle.vue";

const emit = defineEmits(["update"]);

const props = defineProps({
  ...defaultProps,
});

const componentData = ref(props.data.component);
</script>
