import { useMapStore } from '../../../store/map';
import { Divider, Text } from '@fluentui/react-components';

interface IMapStatusbarProps {
    map_id: string;
}

const MapStatusbar = ({
    map_id
}: IMapStatusbarProps) => {
    const { currentCoordinate, currentX, currentY, currentZ, statusText } = useMapStore().id[map_id]

    return (
        <div style={{ display: 'flex', gap: '1rem', padding: '0.25rem', width: '100%', borderRadius: 0, zIndex: 1 }}>
            <Text size={200}>
                x: {currentCoordinate?.[0]}
            </Text>

            <Text size={200}>
                y: {currentCoordinate?.[1]}
            </Text>

            <Divider vertical />

            <Text size={200}>
                Z={currentZ}
            </Text>

            <Text size={200}>
                X={currentX}
            </Text>

            <Text size={200}>
                Y={currentY}
            </Text>

            <Text size={200} style={{ marginLeft: 'auto' }}>
                {statusText}
            </Text>
        </div>
    )
}

export default MapStatusbar