---
/**
 * Segmented control that toggles between a collection's split view (index
 * with sidebar) and its single-page aggregate view.
 *
 * Pure link, no state: the user clicks, the URL changes. Discovery happens
 * on both sides (the root page AND the aggregate), so round-tripping is
 * always one click.
 *
 * Expected to render on any page where both a split and single-page view of
 * the same content exist — currently /docs and /docs/full.
 */
interface Props {
    /** URL of the split / index view (e.g. /docs). */
    splitHref: string;
    /** URL of the single-page aggregate view (e.g. /docs/full). */
    fullHref: string;
    /** Which side is currently active — controls the visual highlight. */
    active: 'split' | 'full';
}

const { splitHref, fullHref, active } = Astro.props;
const isFull = active === 'full';
const targetHref = isFull ? splitHref : fullHref;
const targetLabel = isFull ? 'Switch to split view' : 'Switch to single-page view';
---

<a href={targetHref}
   title={targetLabel}
   aria-label={targetLabel}
   class="group/reading-mode not-prose inline-flex items-center shrink-0 p-0.5 rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900 text-xs sm:text-[0.8125rem] font-sans no-underline select-none transition interact:border-neutral-300 dark:interact:border-neutral-700 interact:bg-neutral-100 dark:interact:bg-neutral-850">

    <span class:list={[
        "px-2.5 py-1 rounded-[3px] flex items-center gap-1.5 transition",
        !isFull
            ? "bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-50 shadow-xs border border-neutral-200/60 dark:border-neutral-700/60 font-medium"
            : "text-neutral-500 dark:text-neutral-400 group-interact/reading-mode:text-neutral-800 dark:group-interact/reading-mode:text-neutral-200 border border-transparent",
    ]}>
        <i class="icon-[radix-icons--dashboard] size-3.5 shrink-0" aria-hidden="true"></i>
        <span>Split</span>
    </span>

    <span class:list={[
        "px-2.5 py-1 rounded-[3px] flex items-center gap-1.5 transition",
        isFull
            ? "bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-50 shadow-xs border border-neutral-200/60 dark:border-neutral-700/60 font-medium"
            : "text-neutral-500 dark:text-neutral-400 group-interact/reading-mode:text-neutral-800 dark:group-interact/reading-mode:text-neutral-200 border border-transparent",
    ]}>
        <i class="icon-[radix-icons--text-align-justify] size-3.5 shrink-0" aria-hidden="true"></i>
        <span>Single page</span>
    </span>
</a>
