// app/components/admin/CommonComponents/FormSectionCard.tsx
import React from 'react';

interface FormSectionCardProps {
  title: string;
  icon?: React.ReactNode;
  children: React.ReactNode;
  className?: string;
}

export default function FormSectionCard({
  title,
  icon,
  children,
  className = '',
}: FormSectionCardProps) {
  return (
    <div className={`bg-var-surface rounded-2xl border border-var-border shadow-var-card overflow-hidden ${className}`}>
      {/* Header */}
      <div className="px-6 py-4 border-b border-var-border bg-var-surface-hover flex items-center gap-2">
        {icon && (
          <span className="text-var-text-muted shrink-0">{icon}</span>
        )}
        <h3 className="text-sm font-semibold text-var-text">{title}</h3>
      </div>

      {/* Body */}
      <div className="p-6 space-y-5">{children}</div>
    </div>
  );
}