<template>
    <div class="tile container-picker">
        <div class="inner-container-picker">
            <div class="container pointer" v-for="container in containers" :class="{ selected: container.name === selected?.name }" @click="() => selected = container">{{ container.name }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { Container } from '~/classes/Pod';

const props = defineProps<{
    containers: Container[]
}>();

const selected: Ref<Container | undefined> = ref(props.containers.at(0));

const emits = defineEmits<{
    (e: 'selected', payload: Container): void
}>();

watch(selected, (selection) => {
    if (selection != null) 
    {
        emits('selected', selection);
    }
}, { immediate: true })
</script>

<style scoped>
.container-picker {
    padding: 0.5rem;
    height: 3.25rem;
    display: flex;
    align-items: flex-start;
}
.inner-container-picker {
    background-color: white;
    display: flex;
    justify-content: flex-start;
    border-radius: 0.25rem;
    gap: 0.5rem;
}
.container {
    padding: 0.25rem 0.5rem;
    color: black;
    border-radius: 0.25rem;
}
.container.selected {
    background-color: var(--primary-color);
    color: rgb(255, 255, 255);
}
</style>