import React from 'react';

interface SectionHeaderProps {
  label: string;
  title: string;
  description?: string;
  align?: 'left' | 'center';
}

export const SectionHeader: React.FC<SectionHeaderProps> = ({
  label,
  title,
  description,
  align = 'center',
}) => {
  const alignmentClass = align === 'center' ? 'text-center mx-auto' : 'text-left';
  
  return (
    <div className={`max-w-4xl mb-16 ${alignmentClass}`}>
      <div className="flex items-center gap-2 mb-4 justify-center md:justify-start">
        <span className="font-mono text-primary text-sm tracking-widest uppercase">
          {"// "}{label}
        </span>
      </div>
      <h2 className="text-4xl md:text-6xl font-bold tracking-tighter leading-tight mb-6">
        {title}
      </h2>
      {description && (
        <p className="text-lg md:text-xl text-neutral-gray leading-relaxed">
          {description}
        </p>
      )}
      <div className={`w-24 h-1 bg-gradient-to-r from-primary to-accent-teal rounded-full mt-8 ${align === 'center' ? 'mx-auto' : ''}`}></div>
    </div>
  );
};
