<script setup>
import { ref } from 'vue'
import CButtonIcon from '../CButtonIcon/CButtonIcon.vue'
import { CCardHeaderProps } from './CCardHeaderProps'

const props = defineProps(CCardHeaderProps)

const emit = defineEmits({
  close: () => true,
})

// p_ArrowOpenの値をrefで取得
const p_ArrowOpenInner = ref(props.p_ArrowOpen)
</script>

<template>
  <!-- カードヘッダー共通 -->
  <div :class="`_header_common _align_${p_TitleAlign} _type_p_${p_Type}`">
    <!-- カードヘッダータイトル -->
    <div class="_header_title">
      {{ p_Title }}
    </div>
    <!-- カードヘッダーボタン -->
    <CButtonIcon
      v-if="!p_ButtonHidden"
      :class="p_ArrowOpenInner ? '_header_btn _arrowOpen' : '_header_btn'"
      class="_header_btn"
      p_ButtonIconName="close"
      tabindex="-1"
      @click="() => emit('close')"
    />
  </div>
</template>

<style lang="sass">
//-------------------------------------------------------------------
// type別のクラス
//-------------------------------------------------------------------
._type_p_primary
  background: var(--q-primary, #000000)
  color: #ffffff

._type_p_secondary
  background: var(--q-secondary, #000000)
  color: #ffffff

// カードヘッダー共通
._header_common
  display: flex
  align-items: center
  padding: 8px 15px
  font-size: inherit
  color: #ffffff
// カードヘッダータイトル
._header_title
  width: 100%
  font-size: inherit
// カードヘッダータイトルの配置
._align_center
  text-align: center
._align_left
  text-align: left
._align_right
  text-align: right

// カードヘッダーボタン
._header_btn
  margin-left: auto
  // font-size: inherit
  color: inherit
  width: 100%
</style>
