import { useRouter } from 'next/navigation';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { TrashIcon } from '@/icons';

export default function LibraryHeader() {
  const router = useRouter();

  return (
    <div className='flex items-center justify-between px-6 pt-4 pb-4'>
      <h1 className='text-3xl font-semibold text-foreground-primary'>
        Library
      </h1>
      <Button
        onClick={() => router.push('/me/v2/trash')}
        variant={ButtonVariant.Secondary}
        size={ButtonSize.Large}
        shape={ButtonShape.Pill}
        icon={TrashIcon}
        className='p-2.5'
      />
    </div>
  );
}