import clsx from "clsx";
import type { ComponentChildren } from "preact";
import { useBool } from "@common/hooks/useBool";
import styles from '../assets/sidebar.module.css';

interface Props {
    side: 'left' | 'right';
    children?: ComponentChildren;
}

export const Sidebar = ({ side, children }: Props) => {
    const open = useBool(true);

    return (
        <div class={clsx(styles.sidebar, open.value ? styles.open : styles.closed)} data-side={side}>
            <button class={styles.toggle} onClick={open.toggle}>
                {side === 'left' ? (open.value ? '◀' : '▶') : (open.value ? '▶' : '◀')}
            </button>
            {open.value && (
                <div class={styles.content}>
                    {children}
                </div>
            )}
        </div>
    );
};
