import React from 'react';

import { ModalTypes } from '@/components/modal/constants/ModalTypes';
import SongQueuePanel from '@/components/section/SongQueuePanel';
import { useModalContext } from '@/context/ModalContext';

import Modal from './Modal';

const SongQueueModal: React.FC = () => {
  const { closeModal } = useModalContext();

  return (
    <Modal
      onClose={() => closeModal(ModalTypes.SONG_QUEUE)}
      title={'Song Queue'}
      disablePadding
      wrapperClasses='max-h-[calc(100vh-400px)]'
      titleWrapperClasses='px-6'
    >
      <SongQueuePanel
        className='p-0'
        headerClassName='hidden'
        nowPlayingClassName='px-6'
        nextItemsClassName='px-6'
        footerClassName='px-6 pb-6'
      />
    </Modal>
  );
};

export default SongQueueModal;