<template>
  <view class="nana-status">
    <view class="dot" :style="{
      backgroundColor: themeContext.resolveThemeColor(status),
    }" />
    <Text v-bind="textProps" :text="text" />
  </view>
</template>

<script setup lang="ts">
import { useTheme  } from '../theme/ThemeDefine';
import type { TextProps } from '../basic/Text.vue';
import Text from '../basic/Text.vue';

export interface StatusProps {
  status?: string,
  text?: string,
  textProps?: TextProps,
}

const themeContext = useTheme();

const props = withDefaults(defineProps<StatusProps>(), {
  status: 'primary',
  textProps: () => ({
    fontSize: 30,
    color: 'text.content',
  }),
});
</script>

<style lang="scss">
.nana-status {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  height: auto;

  .dot {
    margin-right: 10rpx;
    width: 18rpx;
    height: 18rpx;
    border-radius: 50%;
  }
}
</style>