<template>
    <div v-if="params.value" class="dropdown-button">
        <BsButton @click="toggleDropdown" class="bs-secondary-button bs-font-medium-3-normal" style="color:black; border-color: #929292;" unelevated dense>
            <div class="button-content">
                <div class="start-items">
                    <i :class="iconClass"></i>
                    <span class="label-text">{{ value }}</span>
                </div>
                <i class="dku-icon-caret-down-12"></i>
            </div>
        </BsButton>
    </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
    name: "DropDownComponent",
    data() {
        return {
            iconClass: null,
            value: '',
        };
    },
    methods: {
        toggleDropdown() {
            this.$emit('toggle-dropdown', "blabla");
        }
    },
    emits: ['toggle-dropdown'],
    beforeMount() {
        this.value = this.params.value;
        // Using a map is cleaner than multiple if/else statements
        const iconMap = {
            "Pending": "dku-icon-arrow-clockwise-dashes-16",
            "Approved": "dku-icon-checkmark-16",
            "Rejected": "dku-icon-dismiss-16"
        };
        this.iconClass = iconMap[this.params.value] || "";
    }
});
</script>

<style>
.ag-theme-alpine {
   --ag-header-background-color: #fff;
   --ag-font-family: "SourceSansPro";
}

.dropdown-button .q-btn {
    width: -webkit-fill-available;
    /* Ensure the button itself doesn't add weird internal padding that breaks our manual layout */
    padding-left: 8px; 
    padding-right: 8px;
}

.bs-font-medium-3-normal {
    font-size: 12.5px;
}

/* NEW STYLES FOR LAYOUT CONTROL */
.button-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    white-space: nowrap; /* Prevents wrapping to a new line */
}

.start-items {
    display: flex;
    align-items: center;
    overflow: hidden; /* Prevents massive text from breaking the button */
}

.label-text {
    margin-left: 8px; /* Consistent spacing between icon and text */
    margin-right: 8px;
    text-overflow: ellipsis;
    overflow: hidden;
}
</style>