import { clsx } from '@admin/utils';
import { Switch } from './Switch';

export function ToggleCard( { checked, onChange, label, disabled, info } ) {
	return (
		<div
			className={ clsx(
				'flex items-center gap-3 rounded border border-border bg-white px-4 py-3.5',
				disabled ? 'opacity-60' : 'hover:border-gray-300'
			) }
		>
			<Switch
				checked={ checked }
				onChange={ onChange }
				disabled={ disabled }
				label={ label }
			/>
			<span className="flex items-center gap-1.5 text-sm font-medium text-gray-800">
				{ label }
				{ info && (
					<span className="text-gray-400" title={ info }>
						ⓘ
					</span>
				) }
			</span>
		</div>
	);
}