<!--
    Component: Sidebar
    Layout shell for the font comparison sidebar.
    Owns the wrapper, header, and A/B side toggle.
    Content (font list, controls) is injected via snippets.
-->
<script lang="ts">
import { cn } from '$shared/lib';
import {
    ButtonGroup,
    Label,
    ToggleButton,
} from '$shared/ui';
import type { Snippet } from 'svelte';
import {
    type Side,
    comparisonStore,
} from '../../model';

interface Props {
    /**
     * Main area snippet
     */
    main?: Snippet;
    /**
     * Controls area snippet
     */
    controls?: Snippet;
    /**
     * CSS classes
     */
    class?: string;
}

let {
    main,
    controls,
    class: className,
}: Props = $props();
</script>

<div
    class={cn(
        'flex flex-col h-full',
        'w-80',
        'bg-surface dark:bg-dark-bg',
        'border-r border-subtle',
        'transition-colors duration-500',
        className,
    )}
>
    <!-- ── Header: title + A/B toggle ────────────────────────────────── -->
    <div
        class="
            p-6 shrink-0
            border-b border-subtle
            bg-surface dark:bg-dark-bg
        "
    >
        <!-- Title -->
        <Label variant="default" size="lg" bold class="mb-6 block tracking-tight leading-none">
            Configuration
        </Label>

        <!--
            A/B side toggle.
            Two ghost buttons (unsized) side by side in a bordered grid.
            active prop drives white card state on the selected side.
            No size prop → no square sizing, layout comes from class.
        -->
        <ButtonGroup>
            <ToggleButton
                size="sm"
                active={comparisonStore.side === 'A'}
                onclick={() => comparisonStore.side = 'A'}
                class="flex-1 tracking-wide font-bold uppercase"
            >
                <span>Left Font</span>
            </ToggleButton>

            <ToggleButton
                size="sm"
                class="flex-1 tracking-wide font-bold uppercase"
                active={comparisonStore.side === 'B'}
                onclick={() => comparisonStore.side = 'B'}
            >
                <span>Right Font</span>
            </ToggleButton>
        </ButtonGroup>
    </div>

    <!-- ── Main: content area (no scroll - VirtualList handles scrolling) ─────────────────────────────── -->
    <div class="flex-1 min-h-0 bg-surface dark:bg-dark-bg">
        {#if main}
            {@render main()}
        {/if}
    </div>

    <!-- ── Bottom: fixed controls ─────────────────────────────────────── -->
    {#if controls}
        <div
            class="
                shrink-0 p-6
                bg-surface dark:bg-dark-bg
                border-t border-subtle
                z-10
            "
        >
            {@render controls()}
        </div>
    {/if}
</div>
