<template>
    <div class="home-container">
        <TopBar @search="handleSearch" />
        <SideBar />
        <div class="main-content">
            <router-view :searchQuery="searchQuery" />
        </div>
    </div>
</template>

<script>
import { ref } from 'vue';
import TopBar from '../components/TopBar.vue';
import SideBar from '../components/SideBar.vue';

export default {
    name: 'Home',
    components: {
        TopBar,
        SideBar
    },
    setup() {
        const searchQuery = ref('');

        const handleSearch = (query) => {
            searchQuery.value = query;
        };

        return {
            searchQuery,
            handleSearch
        };
    }
};
</script>

<style scoped>
.home-container {
    height: 100vh;
    background: var(--bg-color);
    transition: background-color 0.3s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.main-content {
    margin-left: 240px;
    margin-top: 48px;
    padding: 24px;
    flex: 1;
    overflow-y: auto;
}

.main-content::-webkit-scrollbar {
    width: 4px;
}

.main-content::-webkit-scrollbar-track {
    background: transparent;
}

.main-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}

.main-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}
</style>
