import React, {useState} from 'react'
import "./DropdownMenu.css"
import MoreIcon from './Icons/MoreIcon';

export default function DropdownMenu() {
    const [isDropdownOpen, setIsDropdownOpen] = useState(false);

    const toggleDropdown = () => {
        setIsDropdownOpen(!isDropdownOpen)
    }

    return (
        <div className="dropdown">
            <button className="dropbtn" onClick={toggleDropdown}>
                <MoreIcon></MoreIcon>
            </button>
            <div className={`dropdown-content ${isDropdownOpen ? 'show' : ''}`}>
                <div href="#">High Definition Projector</div>
                <div href="#">Microphone</div>
                <div href="#">Stationery</div>
                <div href="#">Flip charts</div>
                <div href="#">Lectern</div>
                <div href="#">Extra Speakers</div>

            </div>
        </div>
    )

}