"use client"

import { usePathname } from "next/navigation"
import { clsx } from "clsx"
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem
} from "@/components/ui/sidebar"
import Link from "next/link"
import Image from "next/image"
import AivlyLogo from "@/assets/images/aivly-white.svg"
import { getNavItems } from "@/lib/navigation"
import { useTranslations } from "next-intl"

export function AppSideBar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  const pathname = usePathname()
  const t = useTranslations()

  const navItems = getNavItems(pathname)

  return (
    <Sidebar>
      <SidebarContent className="bg-primary-gradient scrollbar-hide">
        <div className="flex justify-center mt-8 mb-2">
          <Link href="/dashboard" className="flex items-center">
            <Image src={AivlyLogo} alt="Company Logo" width={120} height={40} priority />
          </Link>
        </div>
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              {navItems.map(item => (
                <SidebarMenuItem className="my-1" key={item.href}>
                  <SidebarMenuButton
                    isActive={item.active}
                    asChild
                    className={clsx(
                      "h-auto py-3 px-3",
                      item.active ? "bg-white hover:bg-white shadow-lg" : "hover:bg-white/10 text-white/80"
                    )}
                  >
                    <Link href={item.href}>
                      <item.icon className={clsx("w-5 h-5", item.active ? "text-gradient-start" : "text-white/80")} strokeWidth={1.67} />
                      <span
                        className={clsx(
                          "text-sm",
                          item.active
                            ? "font-semibold bg-linear-to-b from-gradient-start to-gradient-end bg-clip-text text-transparent"
                            : "font-normal text-white/80"
                        )}
                      >
                        {t(item.label)}
                      </span>
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  )
}