<template>
  <SectionWrapper
    class="example-section"
    :style="backgroundStyle"
  >
    <CustomSectionExampleTitle />
    <div class="example-section__blank_space" />
    <CustomSectionExampleImagesGrid />
    <div class="custom-block__blank_space" />
    <Button />
    <Toggle />
    <Selectbox />
  </SectionWrapper>
</template>

<script setup lang="ts">
import {
  useBackgroundElementDesign,
} from '@lightspeed/crane';
import { computed } from 'vue';
import { Design } from './type.ts';
import CustomSectionExampleTitle from './component/title/Title.vue';
import CustomSectionExampleImagesGrid from './component/image/ImagesGrid.vue';
import SectionWrapper from '../../shared/components/SectionWrapper.vue';
import Selectbox from './component/selectbox/Selectbox.vue';
import Toggle from './component/toggle/Toggle.vue';
import Button from './component/button/Button.vue';

const backgroundDesign = useBackgroundElementDesign<Design>('background');
const background = computed(() => ({
  type: backgroundDesign.background?.type,
  solidColor: backgroundDesign.background?.solid?.color,
  fromColor: backgroundDesign.background?.gradient?.fromColor,
  toColor: backgroundDesign.background?.gradient?.toColor,
}));
const backgroundStyle = computed(() => {
  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>
.example-section {
  &__blank_space {
    height: 40px;
  }
}
</style>
