<template>
  <div class="cpAccordionGroup" :class="groupClass">
    <slot />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

import { capitalizeFirstLetter } from '@/helpers'

interface Props {
  variant?: 'minimal' | 'default' | 'primary'
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'minimal',
})

const groupClass = computed(() => {
  return { [`cpAccordionGroup--is${capitalizeFirstLetter(props.variant)}`]: true }
})
</script>

<style lang="scss">
.cpAccordionGroup {
  display: flex;
  width: 100%;
  flex-direction: column;

  &--isDefault {
    .cpAccordion {
      border-bottom: fn.px-to-rem(1) solid var(--cp-border-soft);
    }

    .cpAccordion:last-child {
      border-bottom: none;
    }
  }

  &--isPrimary {
    overflow: hidden;
    border: fn.px-to-rem(1) solid var(--cp-border-soft);
    border-radius: var(--cp-radius-md);

    .cpAccordion:not(:last-child) {
      border-bottom: fn.px-to-rem(1) solid var(--cp-border-soft);
    }
  }
}
</style>
