export default function SectionCard({ title, onReset, description, children }) {
  return (
    <div className="bg-white border border-gray-100 rounded-xl  mb-6">
      {(title || description || onReset) && (
        <div className="p-6 border-b border-gray-100">
          <div className="flex items-start justify-between gap-4 mb-1">
            {title && <h2 className="text-lg font-bold text-gray-900">{title}</h2>}
            {onReset && (
              <button
                type="button"
                onClick={onReset}
                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 transition-all shadow-sm"
              >
                <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                </svg>
                Reset to Defaults
              </button>
            )}
          </div>
          {description && <p className="text-sm text-gray-600 leading-relaxed">{description}</p>}
        </div>
      )}
      <div className="p-6">{children}</div>
    </div>
  );
}