import { ReactNode } from 'react';

interface SectionAction {
  label: string;
  onClick: () => void;
}

interface SectionProps {
  title: string;
  children: ReactNode;
  action?: SectionAction;
}

export function Section({ title, children, action }: SectionProps) {
  return (
    <section className="bg-slate-900 rounded-lg border border-slate-800">
      <div className="flex items-center justify-between px-4 py-3 md:px-6 md:py-4 border-b border-slate-800">
        <h2 className="text-base md:text-lg font-semibold text-slate-100">
          {title}
        </h2>
        {action && (
          <button
            onClick={action.onClick}
            className="px-3 py-1.5 text-sm font-medium text-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/20 rounded-lg transition-colors"
          >
            {action.label}
          </button>
        )}
      </div>
      <div className="p-4 md:p-6">
        {children}
      </div>
    </section>
  );
}