<template>
  <BaseBox 
    v-bind="props"
    :inner-style="{
      ...selectStyleType(props.size, 'medium', {
        small: themeStyles.skeletonTitleSm.value,
        medium: themeStyles.skeletonTitleMd.value,
        large: themeStyles.skeletonTitleLg.value,
      }),
      ...themeStyles.skeletonTitle.value,
      ...props.innerStyle,
    }"
  />
</template>

<script setup lang="ts">
import { useTheme } from '@/components/theme/ThemeDefine';
import { DynamicSize, selectStyleType } from '@/components/theme/ThemeTools';
import BaseBox, { type SkeletonItemSize, type SleletonBaseBoxProps } from './SkeletonBaseBox.vue';

const themeContext = useTheme();
const themeStyles = themeContext.useThemeStyles({
  skeletonTitle: {
    borderRadius: DynamicSize('SkeletonTitleRadius', 10),
  },
  skeletonTitleSm: {
    height: DynamicSize('SkeletonTitleSmHeight', 50),
  },
  skeletonTitleMd: {
    height: DynamicSize('SkeletonTitleMdHeight', 70),
  },
  skeletonTitleLg: {
    height: DynamicSize('SkeletonTitleLgHeight', 130),
  },
});

/**
 * 标题占位组件
 */
export interface SkeletonTitleProps extends SleletonBaseBoxProps {
  /**
   * 大小预设
   * @default 'medium'
   */
  size?: SkeletonItemSize,
}

const props = withDefaults(defineProps<SkeletonTitleProps>(), {
  size: 'medium',
});

defineOptions({
  options: {
    virtualHost: true,
    styleIsolation: "shared",
  },
});
</script>
