"use client"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import LogoBox from "@/components/dashboard/logo-box"
import { SignOut } from "@/components/ui/SignOut"
import Link from "next/link"
import { usePathname } from "next/navigation"
import React, { type JSX } from "react"
import { BookText, KeyRound, CirclePlay} from "lucide-react"

export function Sidebar({ className }: { className: string }): JSX.Element {
  const currentRoute = usePathname()
  return (
    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
    <div className={cn("flex flex-col h-screen pt-3 pb-6 max-w-xs", className)}>
      <LogoBox />
      <div className="space-y-4 py-4 grow">
        <div className="px-3 py-2">
          <div className="space-y-2 grid gap-y-1">
            <Link href="/app/gettingstarted">
              <Button
                variant={currentRoute === "/app/gettingstarted" ? "secondary" : "ghost"}
                className="w-full justify-start"
              >
                <CirclePlay size={16} className="mr-2 h-4 w-4" />
                Getting Started
              </Button>
            </Link>
            <Link href="/app/apikeys">
              <Button
                variant={currentRoute === "/app/apikeys" ? "secondary" : "ghost"}
                className="w-full justify-start"
              >
                <KeyRound size={16} className="mr-2 h-4 w-4" />
                API Keys
              </Button>
            </Link>

            <Link href="https://docs.codeflash.ai" target="_blank">
              <Button
                variant="ghost"
                className="w-full justify-start"
              >
                <BookText className="mr-2 h-4 w-4"/>
                Documentation
              </Button>
            </Link>
          </div>
        </div>
      </div>
      <div className="align-bottom flex items-center justify-center">
        <SignOut className="w-28 items-center mx-auto" />
      </div>
    </div>
  )
}
