import {useRef} from 'react';
import './dropdown.css';

type  ItemClick = (e: MouseEvent) => void;

const Dropdown = (title: string, list: Array<{ title: string, onClick: ItemClick }>) => {

    const ulRef = useRef<HTMLUListElement>(null);

    const onMouseMove = () => {
        if (ulRef.current == null) {
            return;
        }
        ulRef.current.style.display = 'block';
    }

    const onMouseOut = () => {
        if (ulRef.current == null) {
            return;
        }
        ulRef.current.style.display = 'none';
    }
    const items = list.map(item => <li onClick={item.onClick}>{item.title}</li>)

    return (
        <div className="dropdown"
             onMouseMove={onMouseMove}
             onMouseOut={onMouseOut}
        >
            <span className="title">{title}</span>
            <ul ref={ulRef}>{items}</ul>
        </div>
    );
}
export default Dropdown;