'use client';
import { UserNav } from '@/components/user-nav';
import { navs } from '@/config/navs';
import {
  Sidebar,
  SidebarContent,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from '@workspace/ui/components/sidebar';
import { Icon } from '@workspace/ui/custom-components/icon';
import { useTranslations } from 'next-intl';
import Image from 'next/legacy/image';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

export function SidebarLeft({ ...props }: React.ComponentProps<typeof Sidebar>) {
  const t = useTranslations('menu');
  const pathname = usePathname();
  return (
    <Sidebar collapsible='none' side='left' {...props} className={'h-auto bg-white'}>
      <div className='pb-7 pt-12'>
        <Image src={'image.png'} width={102} height={49} alt='logo' unoptimized />
      </div>
      <SidebarContent className={''}>
        <SidebarMenu className={'gap-2.5'}>
          {navs.map((nav, navIndex) => (
            <SidebarMenu key={navIndex} className={navIndex === 0 ? 'mb-[42px]' : 'mb-0'}>
              {(nav.items || [nav]).map((item) => (
                <SidebarMenuItem key={item.title} className={''}>
                  <SidebarMenuButton
                    className={
                      'h-[60px] rounded-full px-5 py-[18px] text-xl hover:bg-[#EAEAEA] hover:text-[#0F2C53] active:bg-[#EAEAEA] active:text-[#0F2C53] data-[active=true]:bg-[#0F2C53]'
                    }
                    asChild
                    tooltip={t(item.title)}
                    isActive={item.url === pathname}
                  >
                    <Link href={item.url}>
                      {item.icon && <Icon className={'!size-6'} icon={item.icon} />}
                      <span>{t(item.title)}</span>
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          ))}
        </SidebarMenu>
      </SidebarContent>

      <div>
        <UserNav from='profile' />
      </div>
    </Sidebar>
  );
}