/**
 * EN: Section wrapper component for Mood Board sections
 * VI: Component wrapper cho các sections của Mood Board
 *
 * Provides consistent layout and styling for each section
 * Cung cấp layout và styling nhất quán cho mỗi section
 */
import React from 'react';

interface SectionWrapperProps {
    id: string;
    title: string;
    description?: string;
    children: React.ReactNode;
}

export default function SectionWrapper({
    id,
    title,
    description,
    children,
}: SectionWrapperProps) {
    return (
        <section id={id} className="scroll-mt-24">
            {/* EN: Section Header / VI: Header của section */}
            <div className="mb-8">
                <h2 className="text-3xl font-bold tracking-tight text-text-primary">
                    {title}
                </h2>
                {description && (
                    <p className="text-text-secondary mt-2">{description}</p>
                )}
            </div>

            {/* EN: Section Content / VI: Nội dung section */}
            <div className="space-y-6">{children}</div>
        </section>
    );
}
