---
interface Props {
  tabs: {
        name: string
        id: string
        icon?: string
        active?: boolean
        disabled?: boolean
    }[]
  className?: string
}
const { tabs, className } = Astro.props
import { Icon } from 'astro-icon/components'
---

<custom-tabs>
  <section class="my-6">
    <div class="flex" id="tabs-header">
    {
        tabs.map((tab) => (
            <button class={`tab ${className} ${tab.disabled ? "disabled" : ""}`} id={tab.id+"-tab"} data-active={tab.active ? "true" : "false"}>
                <div class="flex">
                    {tab.icon ? <Icon name={tab.icon} class="mr-2" /> : ''}
                    {tab.name}
                </div>
            </button>
            ),
        )
    }
    </div>
    <div id="tabs-content">
        <slot />
    </div>
</custom-tabs>

<script>
  // Define the behaviour for our new type of HTML element.
  class CustomTabs extends HTMLElement {
    connectedCallback() {
        const buttons = this.querySelectorAll('button.tab');

        buttons.forEach((button) => {
            button.addEventListener('click', () => {
                buttons.forEach((but) => {
                    but?.classList.remove('color-secondary');
                    const div = document.getElementById(but.id.replace('-tab', ''));
                    div?.classList.add('hidden');
                    but.setAttribute('data-active', 'false');
                })
                const tabDiv = document.getElementById(button.id.replace('-tab', ''));
                button?.classList.add('color-secondary');
                tabDiv?.classList.remove('hidden');
                button.setAttribute('data-active', 'true');
            });
        });
    }
  }

  customElements.define('custom-tabs', CustomTabs);
</script>
<style lang="scss" is:global>
    button.tab {
        color: var(--font-color);
        border: none;
        border-bottom: 2px solid transparent;
        opacity: 75%;
    }
    button.tab[data-active="true"] {
        opacity: 100%;
        border-bottom: 2px solid var(--action-color);
        background: linear-gradient(0deg, var(--action-color) 0%,var(--action-color) 5%, transparent 20%);
    }
    #tabs-header {
        margin-left: 6px;
    }
    #tabs-content {
        padding: 9px;
        border: 2px dashed var(--action-color);
        border-radius: 8px;
    }
</style>