<template>
  <h3 :class="headingClasses">
    {{ text }}
  </h3>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { SubheaderProps } from '@/types/components'

const props = defineProps<SubheaderProps>()

const headingClasses = computed(() => {
  const classes = [
    // Base typography - matching Figma design (13px Work Sans Bold)
    'font-sans', // Work Sans from Tailwind preset
    'text-[13px]',
    'font-bold',
    'uppercase',
    'tracking-[0.78px]', // 6% letter spacing
    'leading-[1.2]',

    // Spacing
    'mb-3',

    // Color - Titan green from design system
    'text-titan-green-800',
  ]

  if (props.class) {
    classes.push(props.class)
  }

  return classes.join(' ')
})
</script>
