/**
 * Skeleton Card Component
 * Loading placeholder that matches SettingsCard structure
 */

const SkeletonCard = ({ hasIcon = true }) => {
	return (
		<div className='bg-white rounded-oa-lg shadow-oa-sm p-6'>
			<div className='mb-6 flex items-start gap-4'>
				{hasIcon && (
					<div className='p-3 rounded-oa-md bg-gray-200 animate-pulse flex-shrink-0'>
						<div className='w-6 h-6' />
					</div>
				)}
				<div className='flex-1 space-y-3'>
					{/* Title skeleton */}
					<div className='h-5 bg-gray-200 rounded animate-pulse w-1/3' />
					{/* Description skeleton */}
					<div className='h-4 bg-gray-200 rounded animate-pulse w-2/3' />
				</div>
			</div>
			
			{/* Content skeleton */}
			<div className='space-y-4'>
				<div className='h-4 bg-gray-200 rounded animate-pulse w-1/4' />
				<div className='h-10 bg-gray-200 rounded-oa-md animate-pulse' />
				
				<div className='h-4 bg-gray-200 rounded animate-pulse w-1/4 mt-6' />
				<div className='h-10 bg-gray-200 rounded-oa-md animate-pulse' />
			</div>
		</div>
	);
};

export default SkeletonCard;