<script setup lang="ts">
import { ref } from 'vue'
import '@/styles/common.scss'

const props = defineProps<{
  title: string
  color?: string
}>()

const emits = defineEmits<{
  (event: 'titleClick'): void
}>()

const handleTitleClick = () => {
  emits('titleClick')
}
</script>

<template>
  <view class="section-title flex-row align-center floor-margin-top-40" @click="handleTitleClick">
    <view class="title-indicator" :style="{ backgroundColor: color || '#4D7EEC' }"></view>
    <text class="title-text floor-text-primary floor-text-bold floor-font-32">{{ title }}</text>
  </view>
</template>

<style scoped lang="scss">
.section-title {
  // margin: 0 0 30rpx 0;

  .title-indicator {
    width: 6rpx;
    height: 31rpx;
    border-radius: 3px;
    margin-right: 8rpx;
  }
}
</style>
