import { clsx } from '@admin/utils';
import { navigate } from '@admin/router';
import { Icon } from '@admin/components/Icon';

export function SettingsSidebarNav( { tabs, activeTab, onSelect } ) {
	const items = [ ...tabs ].sort(
		( a, b ) => ( a.order ?? 10 ) - ( b.order ?? 10 )
	);

	return (
		<div className="sticky top-[104px] w-[220px] shrink-0 self-start px-4 py-6">
			<nav className="flex flex-col gap-0.5">
				{ items.map( ( tab ) => (
					<button
						key={ tab.key }
						type="button"
						role="tab"
						aria-selected={ tab.key === activeTab }
						onClick={ () => {
							onSelect( tab.key );
							navigate( '/settings', { tab: tab.key } );
						} }
						className={ clsx(
							'flex cursor-pointer items-center gap-3 rounded border-0 px-3 py-2.5 text-left text-sm',
							tab.key === activeTab
								? 'border border-border bg-white font-medium text-primary shadow-sm'
								: 'bg-transparent text-gray-600 hover:bg-white/60'
						) }
					>
						<Icon name={ tab.icon } className="size-4" />
						{ tab.label }
					</button>
				) ) }
			</nav>
		</div>
	);
}