interface AdminSectionProps {
  title: React.ReactNode;
  description?: React.ReactNode;
  children: React.ReactNode;
  className?: string;
  titleClassName?: string;
  action?: React.ReactNode;
}

export default function AdminSection({
  title,
  description,
  children,
  className = "",
  titleClassName = "",
  action,
}: AdminSectionProps) {
  return (
    <section className={`space-y-4 ${className}`}>
      <div className="flex items-start justify-between gap-4">
        <div>
          <h2
            className={`text-xs font-semibold uppercase tracking-wider text-slate-400 ${titleClassName}`}
          >
            {title}
          </h2>
          {description && (
            <p className="mt-1 text-sm text-slate-500">{description}</p>
          )}
        </div>
        {action && <div className="shrink-0">{action}</div>}
      </div>
      <div className="space-y-4">{children}</div>
    </section>
  );
}
