'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { ArrowLeftIcon } from 'lucide-react'
import { AnimateIn, StandardSiteLogo } from '@/app/components'
import { DOCS_NAV } from '@/app/data/docs-nav'

export function DocsSidebar() {
    const pathname = usePathname()

    return (
        <AnimateIn
            as="aside"
            direction="left"
            delay={0.3}
            onScroll={false}
            className="flex sticky top-8 w-32 shrink-0 flex-col gap-6"
        >
            <Link href="/" className="flex items-center gap-2">
                <StandardSiteLogo className="size-7 text-base-content" />
                <span className="font-medium text-sm tracking-tight text-base-content">Docs</span>
            </Link>

            <nav className="flex flex-col gap-6">
                {DOCS_NAV.map((section) => (
                    <div key={section.title} className="flex flex-col gap-2">
                        <span className="font-mono text-xs font-medium tracking-tight text-muted-content uppercase">
                            {section.title}
                        </span>
                        <div className="flex flex-col gap-1">
                            {section.items.map((item) => {
                                const isDocPage = item.href.startsWith('/docs/')
                                const className = `font-medium text-base tracking-tight py-0.5 ${
                                    pathname === item.href
                                        ? 'text-base-content'
                                        : 'text-muted-content'
                                } hover:text-base-content transition-colors`

                                if (!isDocPage) {
                                    return (
                                        <a key={item.href} href={item.href} className={className}>
                                            {item.label}
                                        </a>
                                    )
                                }

                                return (
                                    <Link key={item.href} href={item.href} className={className}>
                                        {item.label}
                                    </Link>
                                )
                            })}
                        </div>
                    </div>
                ))}
            </nav>

            <div className="h-px w-full bg-border" />

            <Link
                href="/"
                className="flex items-center gap-2 font-medium text-base tracking-tight text-muted-content hover:text-base-content transition-colors"
            >
                <ArrowLeftIcon className="size-4" />
                Back home
            </Link>
        </AnimateIn>
    )
}
