import { Link } from '@tanstack/react-router'
import { useLayout } from '@/context/layout-provider'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarRail,
} from '@/components/ui/sidebar'
import { sidebarData } from './data/sidebar-data'
import { NavGroup } from './nav-group'
import { NavUser } from './nav-user'

function SidebarBrand() {
  return (
    <Link
      to='/'
      className='flex h-25 items-center justify-start px-2 text-sidebar-foreground group-data-[collapsible=icon]:h-12 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0'
    >
      <img
        src='/images/white-logo.svg'
        alt='Bodem Admin'
        className='h-25 w-auto object-contain group-data-[collapsible=icon]:hidden'
      />
      <img
        src='/images/bodemfavicon.svg'
        alt='Bodem'
        className='hidden h-8 w-auto object-contain group-data-[collapsible=icon]:block'
      />
    </Link>
  )
}

export function AppSidebar() {
  const { collapsible, variant } = useLayout()
  return (
    <Sidebar collapsible={collapsible} variant={variant}>
      <SidebarHeader>
        <SidebarBrand />
      </SidebarHeader>
      <SidebarContent>
        {sidebarData.navGroups.map((props) => (
          <NavGroup key={props.title} {...props} />
        ))}
      </SidebarContent>
      <SidebarFooter>
        <NavUser user={sidebarData.user} />
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  )
}
