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

export function SettingRow( {
	id,
	label,
	description,
	note,
	children,
	disabled,
	highlighted,
	className,
	layout = 'row',
} ) {
	const isRow = 'row' === layout;
	const isBlock = 'block' === layout;
	const isNested = 'nested' === layout;
	const hasHeader = isRow || isNested;

	return (
		<div
			id={ id }
			className={ clsx(
				'transition-colors duration-700 last:border-0',
				( isBlock || isRow ) && 'border-b border-border px-6 py-5',
				hasHeader && 'flex items-start justify-between gap-6',
				disabled && 'opacity-50',
				highlighted && 'bg-amber-100',
				className
			) }
		>
			{ label && hasHeader ? (
				<div className="max-w-xl">
					<SettingHeader
						label={ label }
						description={ description }
						note={ note }
					/>
				</div>
			) : (
				<SettingHeader
					label={ label }
					description={ description }
					note={ note }
					descriptionClassName="mb-4"
				/>
			) }
			<div
				className={
					hasHeader
						? 'shrink-0 pt-0.5'
						: clsx( 'space-y-3', ! description && 'mt-1' )
				}
			>
				{ children }
			</div>
		</div>
	);
}