import { cn } from '@/lib/utils'

interface LabelProps {
  label: React.ReactNode
  className?: string
}

const SectionTitle = ({ label, className = '' }: LabelProps) => {
  return (
    <span
      className={cn(
        'font-sans text-base font-bold uppercase leading-[24px] tracking-[3.36px] text-tuatara-950',
        className
      )}
    >
      {label}
    </span>
  )
}

const MainPageTitle = ({ label, className = '' }: LabelProps) => {
  return (
    <span
      className={cn(
        'text-4xl font-bold break-words font-display text-tuatara-950 lg:text-6xl xl:text-7xl',
        className
      )}
    >
      {label}
    </span>
  )
}

const Label = {
  displayName: 'Label',
  PageTitle: MainPageTitle,
  Section: SectionTitle,
}

export { Label }