<script setup lang="ts">
// types

type Props = {
    title: string;
    icon: string;
};

// props

defineProps<Props>();

// inject

const toggleSidebar = inject("toggleSidebar");
</script>

<template>
    <div
        class="flex items-center justify-between w-full gap-3 px-5 py-4 rounded-xl bg-slate-50 border border-slate-200"
    >
        <div class="flex items-center w-full gap-3 lg:w-1/2">
            <button class="flex-center lg:hidden" @click="toggleSidebar">
                <Icon name="ci:bi-chevron-right" size="18" class="**:fill-black" />
            </button>
            <p class="font-semibold text-sm lg:text-lg text-black">
                {{ title }}
            </p>
        </div>
        <Icon :name="icon" size="18" class="**:fill-black" />
    </div>
</template>

<style scoped></style>
