<script setup lang="ts">
import type { AccordionContentProps } from 'reka-ui';
import type { HTMLAttributes } from 'vue';
import { reactiveOmit } from '@vueuse/core';
import { AccordionContent } from 'reka-ui';
import { cn } from '@/lib/utils';

const props = defineProps<
  AccordionContentProps & { class?: HTMLAttributes['class'] }
>();

const delegatedProps = reactiveOmit(props, 'class');
</script>

<template>
  <AccordionContent
    data-slot="accordion-content"
    v-bind="delegatedProps"
    class="ui-accordion-content overflow-hidden text-sm"
  >
    <div :class="cn('pt-0 pb-4', props.class)">
      <slot />
    </div>
  </AccordionContent>
</template>

<style scoped>
.ui-accordion-content[data-state='open'] {
  animation: ui-accordion-down 200ms linear;
}

.ui-accordion-content[data-state='closed'] {
  animation: ui-accordion-up 200ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .ui-accordion-content[data-state='open'],
  .ui-accordion-content[data-state='closed'] {
    animation-duration: 1ms;
  }
}

@keyframes ui-accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--reka-accordion-content-height);
  }
}

@keyframes ui-accordion-up {
  from {
    height: var(--reka-accordion-content-height);
  }
  to {
    height: 0;
  }
}
</style>
