<script lang="ts">
  import { Button } from 'bits-ui';

  let { Icon = null, children, active, ...others } = $props();
</script>

<li role="none">
  <Button.Root
    role="menuitem"
    class="flex items-center cursor-pointer px-4 py-1 rounded-full transition-all duration-300 ease-in-out
		  {active ? 'bg-neutral-100 text-neutral-900' : 'hover:bg-neutral-600'}"
    {...others}
  >
    {#if Icon}
      <Icon
        class="block overflow-hidden transition-all duration-300 ease-in-out
					{children ? 'w-0 text-neutral-900' : ''}
					{active ? 'w-5 mr-2' : ''}"
      />
    {/if}

    {@render children?.()}
  </Button.Root>
</li>
