<script setup>
const props = defineProps({
    clickable: { type: Boolean, default: true },
    rounded: { type: Boolean, default: false }
});

const emit = defineEmits(['click']);

const handleClick = () => {
    if (props.clickable) {
        emit('click');
    }
};
</script>

<template>
    <QItem
        v-bind="$attrs"
        v-ripple="clickable"
        :clickable="clickable"
        class="full-width row items-center justify-between card bg-white"
        :class="[
            rounded ? 'default-radius' : 'no-radius',
            { 'cursor-pointer': clickable }
        ]"
        @click="handleClick()"
    >
        <div
            class="no-padding content-container"
            :class="$slots.actions ? 'col-9' : 'full-width'"
        >
            <slot name="prepend" />
            <div class="content">
                <slot name="content" />
            </div>
        </div>
        <div class="no-padding flex column justify-center">
            <slot name="actions" />
        </div>
    </QItem>
</template>

<style lang="scss" scoped>
.card {
    border-bottom: 1px solid $gray-light;
    padding: 20px;
}

.content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;

    * {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.content-container {
    display: flex;
}
</style>
