'use client';

import { colors, typography } from '@/styles/theme';

export interface SectionProps {
  title: string;
  description?: string;
  children: React.ReactNode;
}

export function Section({ title, description, children }: SectionProps) {
  return (
    <section
      className="bg-white rounded-lg p-6"
      style={{ border: `1px solid ${colors.bgTertiary}` }}
    >
      <h2 className={typography.h3}>{title}</h2>
      {description && (
        <p className={`${typography.bodySecondary} mt-1`}>{description}</p>
      )}
      <div className="mt-4">{children}</div>
    </section>
  );
}