import React from 'react';

interface Props {
  title: string;
  children: React.ReactNode;
  className?: string;
  id?: string;
}

const Section: React.FC<Props> = ({ title, children, className = "", id }) => {
  return (
    <section id={id} className={`py-20 ${className}`}>
      <div className="max-w-6xl mx-auto px-4 sm:px-6">
        <div className="flex flex-col items-center mb-16">
            <h2 className="text-3xl md:text-4xl font-extrabold text-slate-900 mb-4 tracking-tight">
            {title}
            </h2>
            <div className="h-1 w-20 bg-indigo-600 rounded-full"></div>
        </div>
        {children}
      </div>
    </section>
  );
};

export default Section;