<template>
  <div
    class="custom-block"
    :style="backgroundStyle"
  >
    <div>
      <CustomSectionExampleTitle />
      <div class="custom-block__blank_space" />
      <CustomSectionExampleImagesGrid />
    </div>
  </div>
</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';

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(() => {
  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>
.custom-block {
  padding: 50px;

  @media screen and (min-width: 700px) {
    padding: 75px;
  }

  @media screen and (min-width: 1200px) {
    padding: 100px;
  }

  &__blank_space {
    height: 40px;
  }
}
</style>
