import {
    ComponentProps,
    DetailedHTMLProps,
    HTMLAttributes,
    PropsWithChildren,
} from "react";
import Stack from "../../layout/Stack";
import Container from "../../layout/Container";
import Row from "../../layout/Row";
import Divider from "../../layout/Divider";
import TWUIDocsAside from "./TWUIDocsAside";
import { twMerge } from "tailwind-merge";

type Props = PropsWithChildren & {
    DocsLinks: DocsLinkType[];
    docsAsideBefore?: React.ReactNode;
    docsAsideAfter?: React.ReactNode;
    wrapperProps?: ComponentProps<typeof Stack>;
    docsContentProps?: ComponentProps<typeof Row>;
    leftAsideProps?: DetailedHTMLProps<
        HTMLAttributes<HTMLElement>,
        HTMLElement
    >;
    autoExpandAll?: boolean;
};

export type DocsLinkType = {
    title: string;
    href: string;
    children?: DocsLinkType[];
};

/**
 * # TWUI Docs
 * @className `twui-docs-content`
 */
export default function TWUIDocs({
    children,
    DocsLinks,
    docsAsideAfter,
    docsAsideBefore,
    wrapperProps,
    docsContentProps,
    leftAsideProps,
    autoExpandAll,
}: Props) {
    return (
        <Stack
            center
            {...wrapperProps}
            className={twMerge("w-full px-4 sm:px-6", wrapperProps?.className)}
        >
            <Container>
                <Row
                    {...docsContentProps}
                    className={twMerge(
                        "items-stretch gap-6 w-full flex-nowrap",
                        docsContentProps?.className
                    )}
                >
                    <TWUIDocsAside
                        DocsLinks={DocsLinks}
                        after={docsAsideAfter}
                        before={docsAsideBefore}
                        autoExpandAll={autoExpandAll}
                        {...leftAsideProps}
                    />
                    <Divider vertical className="h-auto hidden xl:flex" />
                    <div className="block twui-docs-content py-10 pl-0 xl:pl-6 grow">
                        {children}
                    </div>
                </Row>
            </Container>
        </Stack>
    );
}