<template>
  <span :class="getClass">
    <BzIcon icon="ion:chevron-forward" :style="$attrs.iconStyle" />
  </span>
</template>
<script lang="ts">
  export default {
    name: 'BzArrow',
  };
</script>
<script lang="ts" setup>
  import { computed } from 'vue';
  import { BzIcon } from '/@/components/BzIcon';
  import { useDesign } from '/@/hooks/web/useDesign';

  const props = defineProps({
    /**
     * 箭头展开状态
     */
    expand: { type: Boolean },
    /**
     * 箭头默认向上
     */
    up: { type: Boolean },
    /**
     * 箭头默认向下
     */
    down: { type: Boolean },
    /**
     * 取消 padding/margin，用于内嵌
     */
    inset: { type: Boolean },
  });

  const { prefixCls } = useDesign('basic-arrow');

  // get component class
  const getClass = computed(() => {
    const { expand, up, down, inset } = props;
    return [
      prefixCls,
      {
        [`${prefixCls}--active`]: expand,
        up,
        inset,
        down,
      },
    ];
  });
</script>
