<template>
  <div
    class="custom-footer"
    :style="backgroundStyle"
  >
    <div>
      <ReportAbuse />
      <div class="custom-block__blank_space" />
      <LegalLinks />
      <div class="custom-footer__blank_space" />
      <LanguageSelector />
    </div>
    <div>
      <MadeWith />
      <div class="custom-block__blank_space" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useBackgroundElementDesign } from '@lightspeed/crane';
import ReportAbuse from './component/ReportAbuse.vue';
import MadeWith from './component/MadeWith.vue';
import { Design } from './type.ts';
import LanguageSelector from '../../shared/components/LanguageSelector.vue';
import LegalLinks from './component/LegalLinks.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 scoped lang="scss">
.custom-footer {
  padding: 50px;

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

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

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