fancy-heading.tsx

import { Heading } from '@/components/heading'
import { Accent } from '@/components/accent'
import clsx from 'clsx'

interface FancyHeadingProps {
  text: string
  accent: string
  className?: string
  id?: string
  as?: 'h1' | 'h2'
  margin?: string
}

// Helper function to generate a valid ID from text
function generateId(text: string, accent: string): string {
  const combined = `${text} ${accent}`
  const processed = combined
    .toLowerCase()
    .replace(/[^\w\s-]/g, '') // Remove special characters except spaces and hyphens
    .replace(/\s+/g, '-') // Replace spaces with hyphens