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

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 no-border-radius bg-white"
        :class="{ 'cursor-pointer': clickable, 'no-radius': !rounded }"
        @click="handleClick()"
    >
        <QItemSection class="no-padding">
            <div class="row no-wrap">
                <slot name="prepend" />
                <div class="column full-width">
                    <slot name="content" />
                </div>
            </div>
        </QItemSection>
        <QItemSection
            class="no-padding"
            side
        >
            <slot name="actions" />
        </QItemSection>
    </QItem>
</template>

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