<script lang="ts" setup>
  import { Radio, RadioGroup, Tooltip } from 'ant-design-vue';
  import { TABLE_CARD_MODE_LIST } from './const';
  import { ModeList } from './types';
  import Icon from '../Icon';
  import { useI18n } from '/@/hooks/web/useI18n';
  const props = withDefaults(
    defineProps<{
      value: string;
      mode?: ModeList[];
    }>(),
    {
      mode: () => TABLE_CARD_MODE_LIST,
    }
  );

  const { t } = useI18n();
  const emit = defineEmits(['change']);

  const handleChange = (event: Event) => {
    const value = (event.target as HTMLInputElement).value;
    emit('change', value);
  };
</script>

<template>
  <RadioGroup :value="props.value" button-style="solid" @change="handleChange">
    <template v-for="item in $props.mode" :key="item.value">
      <Tooltip :title="t(item.label)">
        <Radio.Button class="cursor-pointer" :value="item.value">
          <Icon :icon="item.icon" />
        </Radio.Button>
      </Tooltip>
    </template>
  </RadioGroup>
</template>