import { Divider, Flex, rem, Text } from '@mantine/core'
import { CSSProperties } from 'react'
import { useMapStore } from '../../../store/map';

interface IMapStatusbarProps {
    mapControlsStyle: CSSProperties;
}

const MapStatusbar = ({
    mapControlsStyle,
}: IMapStatusbarProps) => {
    const mapState = useMapStore()

    return (
        <Flex gap='sm' p={'4px'} miw={'100%'} fz={'xs'} pos='absolute' bottom='0px' left='0px' style={{ ...mapControlsStyle, borderRadius: 0 }}>
            <Text fz='xs' w={rem(130)}>
                x: {mapState.currentCoordinate?.[0]}
            </Text>

            <Text fz='xs' w={rem(130)}>
                y: {mapState.currentCoordinate?.[1]}
            </Text>

            <Divider orientation='vertical' />

            <Text fz='xs'>
                Z={mapState.currentZ}
            </Text>

            <Text fz='xs'>
                X={mapState.currentX}
            </Text>

            <Text fz='xs'>
                Y={mapState.currentY}
            </Text>

            <Text fz='xs' ml='auto'>
                {mapState.statusText}
            </Text>
        </Flex>
    )
}

export default MapStatusbar