<script setup lang="ts">
import Icon from '@/components/basic/Icon.vue';
import Text from '@/components/basic/Text.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import type { IconProps } from '@/components/basic/Icon.vue';
import type { TextProps } from '@/components/basic/Text.vue';
import type { PropType } from 'vue';

defineOptions({
  options: {
    virtualHost: true,
    styleIsolation: "shared",
  },
});
defineProps({
  icon: {
    type: String,
    default: '',
  },
  iconProps: {
    type: Object as PropType<IconProps>,
    default: () => ({
      color: 'text.content',
      size: 30,
    }),
  },
  text: {
    type: [String,Number],
    default: '',
  },
  textLines: {
    type: Number,
    default: 1,
  },
  textProps: {
    type: Object as PropType<TextProps>,
    default: () => ({
      color: 'text.content',
      fontSize: '30rpx',
    }),
  },
})
</script>

<template>
  <FlexRow gap="10" align="center">
    <Icon v-bind="iconProps" :icon="icon"  />
    <Text :lines="textLines" v-bind="textProps" :text="text" />
  </FlexRow>
</template>