const SectionHeader = ({ title, subtitle }) => {
  return (
    <div className="text-center mb-10">
      <h2 className="text-3xl md:text-4xl font-bold text-dark-900 tracking-tight">
        {title}
      </h2>
      {subtitle && (
        <p className="mt-3 text-base text-badge-text max-w-2xl mx-auto leading-relaxed">
          {subtitle}
        </p>
      )}
      <div className="mt-4 mx-auto w-16 h-1 rounded-full bg-primary-600" />
    </div>
  );
};

export default SectionHeader;
