<template>
  <div>
    <IconText
      :icon="isOpen ? 'arrow-down' : 'arrow-right'"
      :color="$_theme('colorPrimary')"
      size="s"
      @click="isOpen = !isOpen"
    >
      <Title tag="h4" class="title">
        {{ category }}
      </Title>
    </IconText>

    <div v-if="isOpen" class="products-list-slot ml-xl">
      <slot />
    </div>
  </div>
</template>

<script>
import { Title, IconText } from 'inside-collection/atoms'

export default {
  name: 'AccordionCategory',
  components: {
    Title,
    IconText
  },
  props: {
    category: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isOpen: false
    }
  }
}
</script>
