<template>
  <div
    class="absolute inset-0 overflow-hidden bg-slate-900"
    :style="containerStyle"
  >
    <ClientOnly>
      <DotLottieVue
        src="/animations/supply-chain.lottie"
        autoplay
        loop
        :layout="{ fit: 'cover', align: [0.5, 0.5] }"
        class="absolute inset-0 h-full w-full"
      />
    </ClientOnly>

    <div class="absolute inset-0 bg-gradient-to-b from-slate-900/45 via-slate-900/35 to-slate-900/65" />
  </div>
</template>

<script setup lang="ts">
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'

const props = withDefaults(defineProps<{
  height?: number
  fill?: boolean
}>(), {
  height: 860,
  fill: false
})

const containerStyle = computed(() => {
  if (props.fill) return undefined
  return { height: `${props.height ?? 860}px` }
})
</script>
