<template>
    <div
        v-if="state.isTrafficLightVisible"
        class="traffic-light-area"
    >
        <div class="traffic-light">
            <TrafficLight
                :traffic-light-state="state.trafficLightState"
            />
        </div>
    </div>
</template>

<script>
import TrafficLight from '@navis-npm/tos-storybook/src/components/trafficlight/TrafficLight';
import Localizations from '../../../utils/Localizations';

export default {
    name: 'TrafficLightArea',
    components: {TrafficLight},
    props: [],
    /**
     * Data section of this UI component
     * @return {Object}
     */
    data() {
        return {
            labels: Localizations.getTranslatedLabels('truckSectionView')
        };
    },
    computed: {
        /**
         * Getter for the state object in vuex
         * @return {Object}
         */
        state: function() {
            return this.$store.state;
        }
    }
};
</script>

<style scoped>
    .traffic-light-area {
        margin-top: 45%;
    }
    .trailer-selection-buttons {
        width: inherit;
        height: 48px;
        margin-top: 36px;
        margin-left: auto;
        margin-right: auto;
    }
    .not-connected {
        float: left;
        width: 180px;
        color: var(--color-dark);
    }
    .connected {
        float: right;
        width: 180px;
        color: var(--color-dark)
    }
</style>