'use client';

import clsx from 'clsx';
import { usePathname } from 'next/navigation';
import { twMerge } from 'tailwind-merge';

import SpinnerSVG from '../svg/SpinnerSVG';

export const SidebarContentSkeleton = () => {
  const pathname = usePathname();

  return (
    <div
      className={twMerge(
        clsx(
          'h-full w-[232px] max-w-[250px] min-w-[232px] min-[1350px]:max-w-[300px] 2xl:max-w-[350px]',
          'no-scrollbar hidden overflow-y-scroll bg-background-primary',
          {
            'xl:block': pathname.startsWith('/create'),
            'lg:block': !pathname.startsWith('/create'),
          }
        )
      )}
      style={{
        scrollbarWidth: 'none',
        width: 232,
      }}
    >
      <div
        className={
          'flex h-full flex-col items-center justify-center text-foreground-tertiary-glass'
        }
      >
        <SpinnerSVG className='text-current' />
      </div>
    </div>
  );
};