---
interface Props {
  label?: string;
  title: string;
  highlight?: string;
  description?: string;
  align?: 'center' | 'left';
  theme?: 'light' | 'dark';
}

const {
  label = '',
  title,
  highlight = '',
  description = '',
  align = 'center',
  theme = 'light'
} = Astro.props;

const alignClasses = {
  center: 'text-center',
  left: 'text-left'
};

const themeClasses = {
  light: {
    label: 'bg-[var(--color-gold)]/10 text-[var(--color-gold)]',
    title: 'text-gray-900',
    highlight: 'text-[var(--color-blue-primary)]',
    description: 'text-gray-600'
  },
  dark: {
    label: 'bg-white/10 text-[var(--color-gold)]',
    title: 'text-white',
    highlight: 'text-transparent bg-clip-text bg-gradient-to-r from-[var(--color-gold)] to-[var(--color-gold-hover)]',
    description: 'text-gray-400'
  }
};
---

<div class={`mb-16 ${alignClasses[align]}`}>
  {label && (
    <span class={`inline-block px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-full mb-4 ${themeClasses[theme].label}`}>
      {label}
    </span>
  )}
  
  {highlight ? (
    <h2 class={`text-4xl md:text-5xl font-bold ${themeClasses[theme].title} leading-tight`}>
      {title.split(highlight).map((part, i) => (
        <>
          {part}{i === 0 && <span class={themeClasses[theme].highlight}>{highlight}</span>}
        </>
      ))}
    </h2>
  ) : (
    <h2 class={`text-4xl md:text-5xl font-bold ${themeClasses[theme].title} leading-tight`}>
      {title}
    </h2>
  )}
  
  {theme === 'light' && (
    <div class="w-24 h-1.5 bg-gradient-to-r from-[var(--color-gold)] to-[var(--color-gold-hover)] mx-auto rounded-full my-6"></div>
  )}
  
  {description && (
    <p class={`mt-6 max-w-2xl ${align === 'center' ? 'mx-auto' : ''} ${themeClasses[theme].description} leading-relaxed`}>
      {description}
    </p>
  )}
</div>
