team-9/app/src/components/Queue.tsx

import './Queue.css';

import { IonButton, IonContent, IonHeader, IonIcon, IonModal, IonSearchbar, IonTitle, IonToolbar } from '@ionic/react';
import { add } from 'ionicons/icons';
import React, { useState } from 'react';

interface NowPlayingDiscProps {
  coverUrl: string;
  title: string;
  artist: string;
}

interface QueueProps {
  songs: NowPlayingDiscProps[];
}

const Queue: React.FC<QueueProps> = ({ songs }) => {
  const [showModal, setShowModal] = useState(false);
  const [searchText, setSearchText] = useState("");

  return (
    <div className="queue-container">
      <div className="queue-header">
        <h1 className="queue">Up next</h1>
        <IonButton
          fill="clear"
          onClick={() => setShowModal(true)}
          className="icon-button"
        >
          <IonIcon icon={add} />
        </IonButton>
      </div>

      {songs.map((song, index) => (
        <div className="song-item" key={index}>
          <img
            className="cover"
            src={song.coverUrl}
            alt={`${song.title} cover`}
          />
          <div className="text-info">
            <div className="title">{song.title}</div>
            <div className="artist">{song.artist}</div>
          </div>
        </div>
      ))}

      <IonModal isOpen={showModal} onDidDismiss={() => setShowModal(false)}>
        <IonHeader>
          <IonToolbar>
            <IonTitle>Add Songs</IonTitle>
            <IonButton
              slot="end"
              fill="clear"
              onClick={() => setShowModal(false)}
            >
              Close
            </IonButton>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonSearchbar
            value={searchText}
            onIonInput={(e) => setSearchText(e.detail.value!)}
            placeholder="Search..."
          />
        </IonContent>
      </IonModal>
    </div>
  );
};

export default Queue;