import {useRef} from 'react';
import './dropdown.css';
import {IDropdown, IDropdownItem} from '../../interfaces/dropdown/IDropdown.ts';

export default function Dropdown({title, list, handle}: IDropdown) {
    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: IDropdownItem, index: number) =>
        <li key={item.id}
            onClick={e => handle(e, index, { id: item.id, name: item.name })}
        >
            {item.name}
        </li>
    )

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