import React from 'react';

interface DataSectionProps {
  title?: string;
  subtitle?: string;
  actions?: React.ReactNode;
  divider?: 'top' | 'bottom' | 'both' | 'none';
  children: React.ReactNode;
  padding?: 'none' | 'sm' | 'md';
}

export const DataSection: React.FC<DataSectionProps> = ({
  title,
  subtitle,
  actions,
  divider = 'none',
  children,
  padding = 'md',
}) => {
  const paddingClasses = {
    none: '',
    sm: 'py-2',
    md: 'py-4',
  };

  const dividerClasses = {
    top: 'border-t border-[#1a1a1a]',
    bottom: 'border-b border-[#1a1a1a]',
    both: 'border-t border-b border-[#1a1a1a]',
    none: '',
  };

  return (
    <section className={`${paddingClasses[padding]} ${dividerClasses[divider]}`}>
      {(title || subtitle || actions) && (
        <div className="flex items-start justify-between mb-4">
          <div>
            {title && <h3 className="text-heading-lg text-[#e0e0e0]">{title}</h3>}
            {subtitle && <p className="text-body-xs text-[#888888] mt-1">{subtitle}</p>}
          </div>
          {actions && <div>{actions}</div>}
        </div>
      )}
      {children}
    </section>
  );
};
