<template>
  <FlexCol 
    backgroundColor="rgba(255, 255, 255, 0.8)" 
    :innerStyle="{
      backDropFilter: 'blur(10px)',
    }"
    :padding="padding ? [35,25] : 0" 
    :radius="30" 
    shadow="light"
  >
    <SubTitle v-if="title" :title="title" :showMore="showMore" @moreClicked="emit('moreClicked')">
      <template #left>
        <FlexRow align="center">
          <Icon :icon="icon" :size="36" />
          <Width :width="15" />
          <Text :text="title" :fontSize="30" bold />
        </FlexRow>
      </template>
    </SubTitle>
    <slot />
  </FlexCol>
</template>

<script setup lang="ts">
import Icon from '@/components/basic/Icon.vue';
import Text from '@/components/basic/Text.vue';
import SubTitle from '@/components/display/title/SubTitle.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Width from '@/components/layout/space/Width.vue';

defineProps({
  title: {
    type: String,
    default: '',
  },
  icon: {
    type: String,
    default: '',
  },
  showMore: {
    type: Boolean,
    default: false,
  },
  padding: {
    type: Boolean,
    default: true,
  },
});
const emit = defineEmits(['moreClicked'])

</script>