import { MarkerProps } from './types';

export const MarkerComponent = ({ marker, isFirst, isLast }: MarkerProps) => {
    return (
        <li key={marker.key}>
            {`Waypoint ${marker.label} (${marker.key.substring(0, 4)})`}
            <span class="buttons">
                <button onClick={marker.moveUp} disabled={isFirst}>
                    🔼
                </button>
                <button onClick={marker.moveDown} disabled={isLast}>
                    🔽
                </button>
                <button onClick={marker.remove}>🗑️</button>
            </span>
        </li>
    );
};