<script lang="ts">
  import NumberBadge from '../numberbadge/NumberBadge.svelte';

  /**
   * Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.
   *
   * @slot default - The content displayed in the tab.
   * @slot icon - Use this slot to insert an icon for the tab.
   */
  interface Props {
    [key: string]: any;
    /**
     * The HTML tag used for the tab.
     */
    tag?: 'a' | 'button';
    /**
     * If `true`, the tab will be selected.
     */
    selected?: boolean;
    /**
     * URL for the tab link.
     */
    href?: string;
    /**
     * If `true`, the tab will be disabled.
     */
    disabled?: boolean;
    /**
     * The number badge displayed for the tab.
     */
    badge?: number;
  }

  let {
    tag = 'button',
    selected = false,
    href,
    disabled,
    badge,
    class: className,
    ...attrs
  }: Props = $props();
</script>

<li class={['mc-tabs__item', className]} role="presentation">
  {#if tag === 'button'}
    <button
      type="button"
      role="tab"
      aria-selected={selected}
      class={[
        'mc-tabs__tab',
        selected && 'mc-tabs__tab--selected',
        disabled && 'mc-tabs__tab--disabled',
      ]}
      {...attrs}
    >
      <span class="mc-tabs__icon">
        <slot name="icon" />
      </span>

      <span class="mc-tabs__label">
        <slot />
      </span>
      {#if badge}
        <span class="mc-tabs__badge">
          <NumberBadge label={badge} appearance={selected ? 'accent' : 'standard'} />
        </span>
      {/if}
    </button>
  {:else}
    <a
      {href}
      role="tab"
      aria-selected={selected}
      class={[
        'mc-tabs__tab',
        selected && 'mc-tabs__tab--selected',
        disabled && 'mc-tabs__tab--disabled',
      ]}
      {...attrs}
    >
      <span class="mc-tabs__icon">
        <slot name="icon" />
      </span>
      <span class="mc-tabs__label">
        <slot />
      </span>
      {#if badge}
        <span class="mc-tabs__badge">
          <NumberBadge label={badge} appearance={selected ? 'accent' : 'standard'} />
        </span>
      {/if}
    </a>
  {/if}
</li>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-tabs {
  background-color: var(--tabs-color-background-default, #ffffff);
  position: relative;
  width: 100%;
  height: 3.5rem;
}
.mc-tabs__list {
  list-style-type: none;
  padding-inline-start: 0;
  margin-block: 0;
  display: flex;
  gap: 0.5rem;
  padding: var(--tabs-list-padding, 0.5rem 0.25rem);
  overflow: scroll;
}
@media screen and (min-width: 681px) {
  .mc-tabs__list {
    overflow: hidden;
  }
}
.mc-tabs__tab {
  font-size: var(--font-size-100, 0.875rem);
  font-weight: var(--font-weight-semi-bold, 600);
  align-items: center;
  background: none;
  border: none;
  border-radius: var(--border-radius-s, 0.25rem);
  color: var(--tabs-color-text-default, #404040);
  cursor: pointer;
  display: flex;
  gap: 0.25rem;
  height: 2.5rem;
  justify-content: center;
  outline: none;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  position: relative;
  text-decoration: none;
}
.mc-tabs__tab:hover {
  background-color: var(--tabs-color-background-hover, rgba(0, 0, 0, 0.05));
}
.mc-tabs__tab:focus-visible {
  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
}
.mc-tabs__tab--selected {
  color: var(--tabs-color-text-selected, #006902);
  background-color: var(--tabs-color-background-selected, #ebf5de);
}
.mc-tabs__tab--selected:hover {
  background-color: var(--tabs-color-background-selected-hover, #c5e39e);
}
.mc-tabs__tab--disabled {
  color: var(--tabs-color-text-disabled, #b3b3b3);
  cursor: not-allowed;
}
.mc-tabs__tab--disabled:hover {
  background: none;
}
.mc-tabs__label {
  pointer-events: none;
  white-space: nowrap;
}
.mc-tabs__icon {
  fill: currentcolor;
  height: 1.5rem;
  width: 1.5rem;
}
.mc-tabs--centered .mc-tabs__list {
  justify-content: center;
}

.mc-tabs__icon:empty {
  display: none;
}</style>
