import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarHeader,
  SidebarTrigger,
} from "@/components/ui/sidebar"
import Link from "next/link"
import { ManagementIcon, UploadAccount } from "../icons"
import Image from "next/image"

export function AppSidebar() {
  return (
    <Sidebar
      collapsible="icon"
      className="group w-65 data-[state=collapsed]:w-24"
    >
      <div className="relative h-full w-full rounded-xl border border-white bg-black text-white">
        {/* TRIGGER */}
        <div className="absolute top-4 right-4 z-10 transition-all duration-300 group-data-[state=collapsed]:right-auto group-data-[state=collapsed]:left-1/2 group-data-[state=collapsed]:-translate-x-1/2">
          <SidebarTrigger className="rounded-md p-2 transition hover:bg-white/10" />
        </div>

        {/* LOGO */}
        <div className="flex justify-center pt-16 transition-all duration-300 group-data-[state=collapsed]:pt-14">
          <Image
            src="/multipool-logo.png"
            loading="eager"
            alt="logo"
            width={240}
            height={240}
            className="transition-all duration-300 group-data-[state=collapsed]:h-6 group-data-[state=collapsed]:w-6"
          />
        </div>

        <SidebarHeader />

        {/* MENU */}
        <SidebarContent className="mt-10">
          <SidebarGroup className="flex flex-col items-stretch space-y-2 px-2">
            <Link
              href="/dashboard/management-account"
              className="flex w-full items-center justify-start gap-3 rounded-lg p-3 transition group-data-[state=collapsed]:justify-center hover:bg-white/10"
            >
              <ManagementIcon className="h-5 w-5 shrink-0" />
              <span className="group-data-[state=collapsed]:hidden">
                Management Account
              </span>
            </Link>

            <Link
              href="/dashboard/upload-account-data"
              className="flex w-full items-center justify-start gap-3 rounded-lg p-3 transition group-data-[state=collapsed]:justify-center hover:bg-white/10"
            >
              <UploadAccount className="h-5 w-5 shrink-0" />
              <span className="group-data-[state=collapsed]:hidden">
                Upload Account Data
              </span>
            </Link>
          </SidebarGroup>
        </SidebarContent>

        <SidebarFooter />
      </div>
    </Sidebar>
  )
}