/* ====================================================
 * Section Header Component
 * Reusable section title with subtitle and decorations
 * ==================================================== */

'use client';

import ScrollReveal from '@/components/common/ScrollReveal';

interface SectionHeaderProps {
  subtitle?: string;
  title: string;
  description?: string;
  centered?: boolean;
  light?: boolean;
}

export default function SectionHeader({
  subtitle,
  title,
  description,
  centered = true,
  light = false,
}: SectionHeaderProps) {
  return (
    <ScrollReveal className={`mb-12 ${centered ? 'text-center' : ''}`}>
      {subtitle && (
        <span className={`inline-block text-sm font-semibold tracking-wider uppercase mb-2 ${
          light ? 'text-primary-300' : 'text-primary-500'
        }`}>
          {subtitle}
        </span>
      )}
      <h2 className={`text-2xl md:text-3xl lg:text-4xl font-bold mb-4 ${
        light ? 'text-white' : 'text-dark-800'
      }`}>
        {title}
      </h2>

      {/* Decorative line */}
      <div className={`flex items-center gap-2 ${centered ? 'justify-center' : ''} mb-4`}>
        <span className="w-8 h-1 rounded-full bg-primary-500" />
        <span className="w-3 h-3 rounded-full border-2 border-secondary-500" />
        <span className="w-8 h-1 rounded-full bg-secondary-500" />
      </div>

      {description && (
        <p className={`max-w-2xl text-base leading-relaxed ${
          centered ? 'mx-auto' : ''
        } ${light ? 'text-white/70' : 'text-dark-400'}`}>
          {description}
        </p>
      )}
    </ScrollReveal>
  );
}