<div class="container">
    <nav>
        <ul class="tabs">
            <li class="tab selected" data-tab="tomato">🍅 Tomato</li>
            <li class="tab" data-tab="lettuce">🥬 Lettuce</li>
            <li class="tab" data-tab="cheese">🧀 Cheese</li>
        </ul>
    </nav>

    <main class="icon-container">
        <div class="icon">🍅</div>
    </main>
</div>

<script type="module">
    import { press, animateView } from "https://cdn.jsdelivr.net/npm/motion-dom@12.7.3/+esm"
    import { spring } from "https://cdn.jsdelivr.net/npm/motion@12.7.3/+esm"

    let selectedName = "tomato"

    const icons = {
        tomato: "🍅",
        lettuce: "🥬",
        cheese: "🧀",
    }

    function setTab(tabName) {
        selectedName = tabName

        // Update icon text
        const icon = document.querySelector(".icon")
        icon.textContent = icons[tabName]

        // Remove selected class from current tab
        const selectedTab = document.querySelector(".tab.selected")
        selectedTab.classList.remove("selected")

        // Add selected class to new tab
        const newTab = document.querySelector(`[data-tab="${tabName}"]`)
        newTab.classList.add("selected")
    }

    press(".tab", (element) => {
        const tabName = element.dataset.tab

        if (tabName === selectedName) return

        animateView(() => setTab(tabName), {
            duration: 0.4,
            ease: [0.24, 0.02, 0.13, 1.01],
        })
    })
</script>

<style>
    .container {
        width: 480px;
        height: 60vh;
        max-height: 360px;
        border-radius: 10px;
        background: white;
        overflow: hidden;
        box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075),
            0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
            0 8px 8px hsl(0deg 0% 0% / 0.075),
            0 16px 16px hsl(0deg 0% 0% / 0.075);
        display: flex;
        flex-direction: column;
    }

    .container nav {
        background: #fdfdfd;
        padding: 5px 5px 0;
        border-radius: 10px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom: 1px solid #eeeeee;
        height: 44px;
    }

    .container .tabs {
        list-style: none;
        padding: 0;
        margin: 0;
        font-weight: 500;
        font-size: 14px;
        display: flex;
        width: 100%;
    }

    .container .tab {
        color: #0f1115;
        border-radius: 5px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        width: 100%;
        padding: 10px 15px;
        position: relative;
        background: white;
        cursor: pointer;
        height: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        min-width: 0;
        user-select: none;
    }

    .tab.selected {
        background: #eee;
    }

    .tab.selected::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        height: 2px;
        background: #0d63f8;
        view-transition-name: underline;
    }

    .icon-container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
    }

    .icon {
        font-size: 128px;
        view-transition-name: icon;
    }
</style>