<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">
          Carousel
        </p>
        <div class="flex flex-col gap-6">
          <div class="flex flex-col gap-1.5">
            <input-wrapper
                v-if="componentData.button"
                is-vertical
                field="title"
                label-text="Button label *"
                class="w-full mb-4"
                :value="componentData.button.title"
                :limit="51"
            >
              <input
                  v-model="componentData.button.title"
                  name="title"
                  type="text"
                  placeholder="Title"
                  :maxlength="51"
                  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>
      </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";

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

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

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