text: import React from "react";
  import { useNavigate } from "react-router-dom";
  import { useEffect } from "react";
  import { IoIosArrowUp, IoIosPause } from "react-icons/io";
  
  import "./style.scss";
  
  
  export const PrincipalMusic = ({ Dados }) => {
    
    useEffect(() => {
      window.scrollTo(0, 0);
    }, []);
    
    const navigate = useNavigate();
    
    const ReturnPage = () => {
      window.location.href = '/'
    }
  
    
    return(
      <>
        {Dados ? (
          <div id="Principal_Music_Div">
            <button className="Principal_Down_arrow" onClick={() => navigate('/')}>
              <IoIosArrowUp size={40} />
            </button>
            
            <img className="PrincipalImage" src={Dados.img} alt={Dados.name} />
            <input type="range" min="0" max="100" value="0" />
            <p className="PrincipalTitulo">{Dados.name.replaceAll("-", " ")}</p>
            
            <ul id="time_container">
              <li id="currentTime">0:00</li>
              <li id="durationTime">0:00</li>
            </ul>
            
            <div id="buttonsControlls">
              <button>
                <IoIosPause size={30} /> 
              </button>
            </div>
          </div>
        ) : (
          ReturnPage()
        )}
      </>
    );
  };