import React, { useState } from "react";

import Footer from "../components/Fotter";
import Navigation from "../components/Navigation";
import Header from "../components/Header";

import Select from 'react-select';

const Login = () => {



    const data = [
        {
            value: 1,
            text: 'Cours',
            icon:  <img src="./img/cours.png" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-circle" viewBox="0 0 16 16" />

        },
        {
            value: 2,
            text: 'Coaching',
            icon:  <img src="./img/coaching.png" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-circle" viewBox="0 0 16 16" />
        },
        {
            value: 3,
            text: 'Video',
            icon:  <img src="./img/video.png" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-circle" viewBox="0 0 16 16" />

        },
        {
            value: 4,
            text: 'Right Arrow tt',
            icon: <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z" />
            </svg>
        }
    ];

    const [selectedOption, setSelectedOption] = useState(null);

    // handle onChange event of the dropdown
    const handleChange = e => {
        setSelectedOption(e);
    }
  return (

      <div className={"login"}>
            <Navigation />

          <div style={{color: "red", width: "50%"}} >

          <Select
              placeholder="Type..."
              value={selectedOption}
              options={data}
              style={{width: '50px'}}
              onChange={handleChange}
              getOptionLabel={e => (
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                      {e.icon}
                      <span style={{ marginLeft: 5 }}>{e.text}</span>
                  </div>
              )}
          />
          {selectedOption && <div style={{ marginTop: 5, lineHeight: '60px'}}>
              <b>Selected Option:</b> {selectedOption.value}
          </div>}
          </div>


          <Footer />


          <h1> Page Login </h1>


      </div>

  )
}


export default Login;