import { usePrompt } from '../hooks/usePrompt';
import type { Marker } from './types';

type MarkerProps = {
    marker: Marker;
    isFirst: boolean;
    isLast: boolean;
};

export const MarkerComponent = ({ marker, isFirst, isLast }: MarkerProps) => {
    const changeLongLabel = usePrompt(
        'Enter new label',
        marker.longLabel,
        marker.changeLongLabel,
    );

    return (
        <li key={marker.key}>
            {`Waypoint ${marker.shortLabel} (${marker.longLabel})`}
            <span class="buttons">
                <button onClick={changeLongLabel}>✎</button>
                <button onClick={marker.moveUp} disabled={isFirst}>
                    ↑
                </button>
                <button onClick={marker.moveDown} disabled={isLast}>
                    ↓
                </button>
                <button onClick={marker.remove}>🗑️</button>
            </span>
        </li>
    );
};
