import { DetailedHTMLProps, HTMLAttributes } from "react";
import { DocsLinkType } from ".";
import Stack from "../../layout/Stack";
import TWUIDocsLink from "./TWUIDocsLink";
import { twMerge } from "tailwind-merge";

type Props = DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> & {
    DocsLinks: DocsLinkType[];
    before?: React.ReactNode;
    after?: React.ReactNode;
    autoExpandAll?: boolean;
};
export default function TWUIDocsAside({
    DocsLinks,
    after,
    before,
    autoExpandAll,
    ...props
}: Props) {
    return (
        <aside
            {...props}
            className={twMerge("py-10 hidden xl:flex", props.className)}
        >
            <Stack>
                {before}
                {DocsLinks.map((link, index) => (
                    <TWUIDocsLink
                        docLink={link}
                        key={index}
                        autoExpandAll={autoExpandAll}
                    />
                ))}
                {after}
            </Stack>
        </aside>
    );
}