'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-screen bg-white'}>
      <div className='pb-7 pl-4 pt-12'>
        <Link href={'/dashboard'}>
          <Image
            className={'cursor-pointer'}
            src={'image.png'}
            width={102}
            height={49}
            alt='logo'
            unoptimized
          />
        </Link>
      </div>
      <SidebarContent className={''}>
        <SidebarMenu className={'gap-2.5'}>
          {navs.map((nav, navIndex) => (
            <SidebarMenu key={navIndex} className={navIndex === 0 ? 'mb-[42px]' : 'mb-0'}>
              <SidebarMenuItem key={nav.title} className={''}>
                <SidebarMenuButton
                  className={
                    'h-[60px] rounded-full px-5 py-[18px] text-xl hover:bg-[#EAEAEA] hover:text-[#0F2C53] focus-visible:!outline-none focus-visible:!ring-0 active:bg-[#EAEAEA] active:text-[#0F2C53] data-[active=true]:bg-[#0F2C53]'
                  }
                  asChild
                  tooltip={t(nav.title)}
                  isActive={nav.url === pathname}
                >
                  <Link href={nav.url}>
                    {nav.icon && <Icon className={'!size-6'} icon={nav.icon} />}
                    <span>{t(nav.title)}</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          ))}
        </SidebarMenu>
      </SidebarContent>

      <div className={'mt-4'}>
        <UserNav from='profile' />
      </div>
    </Sidebar>
  );
}
