// React import
import { useState } from "react";

// CSS import
import '../css/UserCheckin.css';

/**
 * Componenet for checkins. Has a toggle to show more info.
 * @param {Object} props The props of the component.
 * @returns {import('react').HtmlHTMLAttributes} A list element holding a checkin's info.
 */
function Hub(props) {
    const LEN_NAME = 15;

    const [isHover, setIsHover] = useState(false);

    const formatName = name => {
        if (name.length >= LEN_NAME) {
            return props.name.substring(0, LEN_NAME - 3) + '...';
        }
        return props.name;
    }

    return (
        <li className='Checkin'>
            <div className="Img-flex">
                <span 
                className="Clickable-name" 
                onMouseOver = {() => setIsHover(true)}
                onMouseLeave = {() => setIsHover(false)}
                onClick = {() => props.setSelectedId(props.id)}>{isHover || props.searching ? props.name : formatName(props.name)}</span>
                <span>{props.value.toFixed(3)}</span>
            </div>
        </li>);
}

export default Hub;