import React from 'react'
import './login.css'
import Img from '../../images/spotify_login.png'

const Login = () => {
  const handleClick = () => {
    const ClientID = process.env.REACT_APP_CLIENT_ID;
    const Redirect_Url = process.env.REACT_APP_REDIRECT_URL;
    const API_URL = process.env.REACT_APP_API_URL;
    const scope = [
      'user-read-email', 
      'user-read-private', 
      'user-modify-playback-state', 
      'user-read-playback-state', 
      'user-read-currently-playing',
      'user-read-playback-position',
      'user-top-read',
      'user-read-recently-played',
    ];
    window.location.href = `${API_URL}?client_id=${ClientID}&redirect_uri=${Redirect_Url}&scope=${scope.join(" ")}&response_type=token&show_daialog=true`;
  };

  return (
    <div className='login'>
        <img src={Img} alt="" />
        <button onClick={handleClick}>Connect Spotify</button>
    </div>
  )
}

export default Login

