<script setup lang="ts">
import { PropType } from 'vue'
import { SizeTypes, MDIconTypes, ColorTypes } from '../../types'
import CCButton from '../CCButton/CCButton.vue'

defineProps({
  /**
   * ボタン間のスペース
   * @example '50px'
   */
  centerSpace: { type: String, default: '50px' },
  /**
   * 左ボタンのラベル
   * @example 'キャンセル'
   */
  leftButtonLabel: { type: String, default: 'label' },
  /**
   * 右ボタンのラベル
   * @example '保存'
   */
  rightButtonLabel: { type: String, default: 'label' },
  /**
   * 左ボタンのアウトライン
   * @example leftButtonOutline
   */
  leftButtonOutline: { type: Boolean, default: false },
  /**
   * 右ボタンのアウトライン
   * @example rightButtonOutline
   */
  rightButtonOutline: { type: Boolean, default: false },
  /**
   * ラウンドデザイン
   * @example rounded
   */
  rounded: { type: Boolean, default: false },
  /**
   * スクエアデザイン
   * @example square
   */
  square: { type: Boolean, default: false },
  /**
   * サイズ
   * @example 'xs' | 'XS' | 's' | 'S' | 'm' | 'M' | 'l' | 'L' | 'xl' | 'XL'
   */
  size: { type: String as PropType<SizeTypes>, default: 'S' },
  /**
   * 左ボタンのカラー
   * @example 'primary'
   */
  leftButtonColor: {
    type: String as PropType<ColorTypes>,
    default: 'primary',
  },
  /**
   * 右ボタンのカラー
   * @example 'secondary'
   */
  rightButtonColor: {
    type: String as PropType<ColorTypes>,
    default: 'primary',
  },
  /**
   * 左ボタンのディセーブル
   * @example leftButtonDisabled
   */
  leftButtonDisabled: { type: Boolean, default: false },
  /**
   * 右ボタンのディセーブル
   * @example rightButtonDisabled
   */
  rightButtonDisabled: { type: Boolean, default: false },
  /**
   * 左ボタンのアイコン左
   * @example 'mail'
   */
  leftButtonIconLeft: { type: String as PropType<MDIconTypes>, default: '' },
  /**
   * 左ボタンのアイコン右
   * @example 'phone'
   */
  leftButtonIconRight: { type: String as PropType<MDIconTypes>, default: '' },
  /**
   * 右ボタンのアイコン左
   * @example 'mail'
   */
  rightButtonIconLeft: { type: String as PropType<MDIconTypes>, default: '' },
  /**
   * 右ボタンのアイコン右
   * @example 'phone'
   */
  rightButtonIconRight: { type: String as PropType<MDIconTypes>, default: '' },
})

const emit = defineEmits<{
  (e: 'clickLeft'): void
  (e: 'clickRight'): void
}>()
</script>

<template>
  <div class="_button_container">
    <CCButton
      :label="leftButtonLabel"
      :outline="leftButtonOutline"
      :rounded="rounded"
      :square="square"
      :size="size"
      :color="leftButtonColor"
      :disabled="leftButtonDisabled"
      :iconLeft="leftButtonIconLeft"
      :iconRight="leftButtonIconRight"
      @click="() => emit('clickLeft')"
    />
    <CCButton
      :label="rightButtonLabel"
      :outline="rightButtonOutline"
      :rounded="rounded"
      :square="square"
      :size="size"
      :color="rightButtonColor"
      :disabled="rightButtonDisabled"
      :iconLeft="rightButtonIconLeft"
      :iconRight="rightButtonIconRight"
      @click="() => emit('clickRight')"
    />
  </div>
</template>

<style lang="sass" scoped>
._button_container
  display: grid
  grid-template-columns: repeat(2, 1fr)
  gap: v-bind(centerSpace)
</style>
