/**
 * Internal Dependencies
 */
import { clsx } from '@admin/utils';
import { Switch } from '@admin/components/Switch';

export function ToggleRow( {
	checked,
	onChange,
	label,
	description,
	bordered = false,
	children,
} ) {
	return (
		<div
			className={ clsx(
				'flex items-start gap-3.5',
				bordered && 'border-t border-gray-200 pt-4'
			) }
		>
			<Switch checked={ checked } onChange={ onChange } label={ label } />
			<span
				className={ clsx(
					'flex flex-col',
					children ? 'flex-1 gap-2' : 'gap-0.5'
				) }
			>
				<span className="text-[13.5px] font-semibold">{ label }</span>
				{ description && (
					<span className="max-w-[560px] text-[12.5px] text-gray-500">
						{ description }
					</span>
				) }
				{ children }
			</span>
		</div>
	);
}