import { component$ } from '@builder.io/qwik'
import { Link, useLocation } from '@builder.io/qwik-city'
import { DocumentationCtx } from '~/contexts'

/**
 * options = [] array con la lista de opciones de la documentacion
 */
export default component$(
    ({ options = [] }: { options: DocumentationCtx[] }) => {
        return (
            <div>
                {options.map((item, i) => (
                    <UlCompoent key={i} title={item.title} list={item.list} />
                ))}
            </div>
        )
    }
)

export const UlCompoent = component$(
    (porps: { title: string; list: { link: string; name: string }[] }) => {
        return (
            <ul>
                <li class="mt-2 lg:mt-2">
                    <h5 class="mb-8 lg:mb-3 font-semibold text-slate-900 dark:text-slate-200">
                        {porps.title}
                    </h5>
                    <LiComponent list={porps.list} />
                </li>
            </ul>
        )
    }
)

export const LiComponent = component$(
    (porps: { list: { link: string; name: string }[] }) => {
        const location = useLocation()
        const currentPage = location.pathname
        return (
            <ul class="space-y-6 lg:space-y-2 border-l border-slate-100 dark:border-slate-800">
                {porps.list.map((opt) => (
                    <li>
                        <Link
                            class={[
                                currentPage === `${opt.link}/`
                                    ? 'font-semibold'
                                    : '',
                                'block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300 ',
                            ]}
                            href={opt.link}
                        >
                            {opt.name}
                        </Link>
                    </li>
                ))}
            </ul>
        )
    }
)