<script>
	import { Check } from '@foxui/all/icons';
</script>

<div class={'flex min-w-max items-center justify-center gap-4 rounded-full'}>
	<div
		class="bg-base-100 dark:bg-base-900 text-base-900 dark:text-base-50 border-base-200 dark:border-base-800 divide-base-200 dark:divide-base-800 flex w-28 flex-col gap-x-1 divide-y overflow-hidden rounded-ui border text-sm"
	>
		<div
			class={[
				'bg-accent-500/5 inline-flex cursor-pointer items-center p-1 px-3 transition-all',
				'text-accent-700 dark:text-accent-300'
			]}
		>
			<Check size={14} strokeWidth={2} class="mr-1.5" />

			Apple
		</div>

		<div class={['inline-flex cursor-pointer items-center p-1 px-3 transition-all']}>
			<div class="mr-1.5 size-3.5"></div>
			Orange
		</div>

		<div class={['inline-flex cursor-pointer items-center  p-1 px-3 transition-all']}>
			<div class="mr-1.5 size-3.5"></div>
			Banana
		</div>
	</div>
</div>
