<script setup>
import { computed } from 'vue'
import { StyleService } from '@/Stores/style'
import { gradientBgPurplePink, gradientBgDark, gradientBgPinkRed, gradientBgGreenBlue } from '@/colors'

const props = defineProps({
  bg: {
    type: String,
    required: true,
    validator: value => ['purplePink', 'pinkRed', 'greenBlue'].includes(value)
  }
})

const colorClass = computed(() => {
  if (StyleService().darkMode) {
    return gradientBgDark
  }

  switch (props.bg) {
    case 'purplePink':
      return gradientBgPurplePink
    case 'pinkRed':
      return  gradientBgPinkRed
    case 'greenBlue':
      return gradientBgGreenBlue
  }
  
  return ''
})
</script>

<template>
  <div
    class="flex min-h-screen items-center justify-center"
    :class="colorClass"
  >
    <slot card-class="w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12 shadow-2xl" />
  </div>
</template>
