import {
    AnchorHTMLAttributes,
    DetailedHTMLProps,
    HTMLAttributes,
    OlHTMLAttributes,
} from "react";
import { twMerge } from "tailwind-merge";

/**
 * # Ordered and unorder Lists
 * @className twui-ol
 * @className twui-ul
 */
export default function List({
    ordered,
    items,
    ...props
}: DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement> &
    DetailedHTMLProps<OlHTMLAttributes<HTMLOListElement>, HTMLOListElement> & {
        items: {
            content: React.ReactNode | string;
        }[];
        ordered?: boolean;
    }) {
    const listContent = (
        <>
            {items.map((item, index) => (
                <li key={index}>{item.content}</li>
            ))}
        </>
    );

    const className = "flex flex-col items-start gap-4";

    if (ordered) {
        return (
            <ol
                {...props}
                className={twMerge(className, "twui-ol", props.className)}
            >
                {listContent}
            </ol>
        );
    }

    return (
        <ul
            {...props}
            className={twMerge(className, "twui-ul", props.className)}
        >
            {listContent}
        </ul>
    );
}