<script lang="ts" setup>
import { right } from '../core/libs/svgs'

const props = defineProps({
  customClass: {
    type: String,
    default: () => '',
  },
  title: {
    type: String,
    default: () => '',
  },
  path: {
    type: String as PropType<string | undefined>,
    default: () => undefined,
    required: false,
  },
  size: {
    type: String as PropType<'sm' | 'base' | 'xl'>,
    default: () => 'xl',
  },
  endText: {
    type: String,
    default: () => '',
  },
})
const handleMore = async () => {
  await uni.navigateTo({ url: props.path })
}
</script>
<template>
  <view class="flex justify-between items-center" :class="[customClass]">
    <div
      class="font-normal"
      :class="[`text-${size}`, {sm: 'text-black/90', base: 'text-black/90', xl: 'text-black' }[size]]"
    >
      {{ title }}
    </div>
    <div class="overflow-hidden flex-1">
      <slot name="start"></slot>
    </div>
    <div
      v-if="path"
      class="text-right text-black/30 text-sm font-normal leading-tight"
      @click="handleMore"
    >
      {{ endText }}
      <wd-img :src="right" width="10" height="10"></wd-img>
    </div>
  </view>
</template>
