<template>
  <div :class="$style.component">
    <PerdCard :class="[$style.card, { isFullWidth: fullWidth }]">
      <div :class="$style.body">
        <div :class="$style.emojiMark" aria-hidden="true">
          {{ emoji }}
        </div>

        <PerdHeading :level="2">
          {{ title }}
        </PerdHeading>

        <div v-if="$slots.default" :class="$style.content">
          <slot />
        </div>

        <div v-if="$slots.actions" :class="$style.actions">
          <slot name="actions" />
        </div>
      </div>
    </PerdCard>
  </div>
</template>

<script lang="ts" setup>
  import PerdCard from '~/components/PerdCard.vue'
  import PerdHeading from '~/components/PerdHeading.vue'

  interface Props {
    emoji: string;
    fullWidth?: boolean;
    title: string;
  }

  const {
    emoji,
    fullWidth,
    title
  } = defineProps<Props>()
</script>

<style module>
  .component {
    inline-size: 100%;
  }

  .card {
    inline-size: 100%;
    max-inline-size: 42rem;
    box-sizing: border-box;
    margin: 0 auto;
    background:
      linear-gradient(180deg, var(--color-surface-primary), var(--color-surface-secondary));

    &:global(.isFullWidth) {
      max-inline-size: none;
    }
  }

  .body {
    display: grid;
    gap: var(--spacing-16);
    justify-items: center;
    text-align: center;
  }

  .emojiMark {
    font-size: clamp(2rem, 6vw, 3rem);
    line-height: 1;
  }

  .content {
    max-inline-size: 32rem;
    color: var(--color-text-tertiary);
    line-height: var(--line-height-body);
  }

  .actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-8);
  }
</style>
