<template>
  <SectionWrapper :style="backgroundStyle">
    <Title v-if="showTitle" />
    <div class="products-wrapper">
      <ProductItem
        v-for="product in productSelectorContent.products"
        :key="product.id"
        :product="product"
      />
    </div>
  </SectionWrapper>
</template>

<script setup lang="ts">
import { computed, CSSProperties } from "vue";
import {
  Color,
  useBackgroundElementDesign,
  useInputboxElementContent,
  useProductSelectorElementContent,
  useTextElementDesign,
} from "@lightspeed/crane-api";
import { Content, Design } from "./type";
import SectionWrapper from "../../shared/components/SectionWrapper.vue";
import Title from "./component/Title.vue";
import ProductItem from "./component/ProductItem.vue";


const titleContent = useInputboxElementContent<Content>("section_title");
const titleDesign = useTextElementDesign<Design>('section_title');

const productSelectorContent =
  useProductSelectorElementContent<Content>("featured_products");

const showTitle = computed(() => titleDesign.visible && titleContent.hasContent);

const backgroundDesign = useBackgroundElementDesign<Design>("background");
const background = computed(() => ({
  type: backgroundDesign.background?.type,
  solidColor: backgroundDesign.background?.solid?.color as Color,
  fromColor: backgroundDesign.background?.gradient?.fromColor as Color,
  toColor: backgroundDesign.background?.gradient?.toColor as Color,
}));

const backgroundStyle = computed<CSSProperties>(() => {
  if (background.value.type === "gradient") {
    return {
      "background-image": `linear-gradient(to right, ${background.value.fromColor.hex}, ${background.value.toColor.hex})`,
    };
  }
  return { "background-color": background.value.solidColor.hex };
});
</script>

<style lang="scss" scoped>
.products-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}
</style>
