// SettingsCard.jsx
import SettingsButtons from "./SettingsButtons";

const SettingsCard = ({
	title,
	description,
	icon: Icon,
	children,
	onSave,
	onRun,
	isLoading = false,
	collapsible = false,
	defaultExpanded = true,
}) => {
	return (
		<div className='bg-white rounded-oa-lg shadow-oa-sm p-6'>
			{(title || description || Icon) && (
				<div className='mb-6 flex items-start gap-4'>
					{Icon && (
						<div className='p-3 rounded-oa-md bg-[#2563eb] flex-shrink-0'>
							<Icon className='w-6 h-6 text-white' />
						</div>
					)}
					<div className='flex-1'>
						{title && (
							<h2 className='text-lg font-oa-semibold text-oa-text-primary'>
								{title}
							</h2>
						)}
						{description && (
							<p className='mt-1 text-oa-sm text-oa-text-tertiary'>
								{description}
							</p>
						)}
					</div>
				</div>
			)}
			<div className='space-y-6'>{children}</div>
			{/* Show on mobile, hide on desktop */}
			<div className='pt-6 sm:hidden'>
				<SettingsButtons
					onSave={onSave}
					onRun={onRun}
					isLoading={isLoading}
				/>
			</div>
		</div>
	);
};

export default SettingsCard;