import clsx from "clsx";
import { PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen } from "lucide-preact";
import type { ComponentChildren } from "preact";
import styles from '../assets/sidebar.module.css';

interface Props {
    side: 'left' | 'right';
    children?: ComponentChildren;
    open: boolean;
    onToggle: () => void;
    class?: string;
}

export const Sidebar = ({ side, children, open, onToggle, class: className }: Props) => {

    const isLeft = side === 'left';
    const IconComponent = isLeft
        ? (open ? PanelLeftClose : PanelLeftOpen)
        : (open ? PanelRightClose : PanelRightOpen);

    return (
        <div class={clsx(styles.sidebar, open ? styles.open : styles.closed, className)} data-side={side}>
            <button class={styles.toggle} onClick={onToggle}>
                <IconComponent size={16} />
            </button>
            {open && (
                <div class={styles.content}>
                    {children}
                </div>
            )}
        </div>
    );
};
