import { useRouter } from 'next/navigation';
import { RefObject } from 'react';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { LibraryContent } from '@/components/library/LibraryContent';
import TitleText from '@/components/title/TitleText';
import { TrashIcon } from '@/icons';
import { LibraryTab } from '@/logging/eventTypes/PageViewedEventType';

export default function DesktopLibrary({
  libraryRef,
  initialTabKey,
}: {
  libraryRef: RefObject<HTMLDivElement | null>;
  initialTabKey: LibraryTab;
}) {
  const router = useRouter();
  return (
    <div className='mt-0 flex w-full flex-col overflow-y-hidden md:mt-4'>
      <div className='flex items-center justify-between px-6 pt-4 pb-4'>
        <div className='pt-1.5'>
          <TitleText text='Library' />
        </div>
        <Button
          onClick={() => router.push('/me/trash/')}
          variant={ButtonVariant.Secondary}
          size={ButtonSize.Large}
          shape={ButtonShape.Pill}
          icon={TrashIcon}
          className='my-2 p-2.5'
        />
      </div>
      <LibraryContent libraryRef={libraryRef} tabKey={initialTabKey} />
    </div>
  );
}