<script>"use strict";
import { createEventDispatcher, onMount } from "svelte";
import Icon from "./Icon.svelte";
import Badge from "./Badge.svelte";
export let label;
export let icon = null;
export let badge = null;
export let isActive = false;
export let onClick;
export let disabled = false;
const dispatch = createEventDispatcher();
let tabElement;
let isHovered = false;
onMount(() => {
  dispatch("tabMounted", { element: tabElement });
});
function handleMouseEnter() {
  isHovered = true;
}
function handleMouseLeave() {
  isHovered = false;
}
</script>

<button
	on:mouseenter={handleMouseEnter}
	on:mouseleave={handleMouseLeave}
	bind:this={tabElement}
	on:click={onClick}
	class="relative flex items-center gap-[6px] px-3 pb-3 pt-1 transition-all text-lg"
	{disabled}
	class:opacity-30={disabled}
	class:font-[500]={isActive}
	class:text-stone-950={isActive}
	class:text-stone-400={!isActive}
	class:hover:text-stone-500={!disabled && !isActive}
	class:hover:border-stone-400={!disabled && !isActive}
>
	{#if icon}
		<Icon
			iconName={icon}
			size="xs"
			className={isActive
				? 'bg-stone-950'
				: isHovered && !disabled
					? 'bg-stone-500'
					: 'bg-stone-400'}
		/>
	{/if}
	<span>{label}</span>
	{#if badge}
		<Badge {...badge} />
	{/if}
	{#if isHovered && !disabled}
		<span
			class="absolute bottom-[-1px] h-[1px] bg-stone-400 transition-all duration-300 ease-in-out w-full left-0"
		/>
	{/if}
</button>
