<template>
    <v-sheet 
        outlined
        width="100%"
        class="d-flex justify-space-between align-center"
    >
        <v-sheet width="calc(100% - 30px)" class="px-1">
            {{curs.name}}
            <div class="text-caption d-flex justify-space-between">
                <span v-if="curs.category">
                    {{curs.category.name}}
                </span>
                <span>
                    {{curs.tip}}
                </span>
            </div>
        </v-sheet>

        <v-sheet width="30">
            <v-btn
                icon
                small
                color="primary"
                @click="$emit('click', curs)"
            >
                <v-icon>
                    mdi-chevron-right
                </v-icon>
            </v-btn>
        </v-sheet>
    </v-sheet>
</template>

<script>
    export default {

        props: {
            curs: {required: true},
        },
        
        name: 'CursuriSelectorLeftItem',
    }
</script>