import React, { ReactNode } from 'react';

interface SectionProps {
  children: ReactNode;
  className?: string;
  title?: string;
  description?: string;
  variant?: 'default' | 'card' | 'highlight';
}

export function Section({ 
  children, 
  className = '',
  title,
  description,
  variant = 'default'
}: SectionProps) {
  const baseClasses = 'space-y-4';
  
  const variantClasses = {
    default: '',
    card: 'bg-iron-gray rounded-lg p-6 border border-charcoal-outline',
    highlight: 'bg-gradient-to-r from-blue-900/20 to-blue-700/10 rounded-lg p-6 border border-blue-500/30'
  };
  
  const classes = [
    baseClasses,
    variantClasses[variant],
    className
  ].filter(Boolean).join(' ');
  
  return (
    <section className={classes}>
      {title && (
        <h2 className="text-xl font-semibold text-white">{title}</h2>
      )}
      {description && (
        <p className="text-sm text-gray-400">{description}</p>
      )}
      {children}
    </section>
  );
}