<script setup lang="ts">
import { Head } from '@inertiajs/vue3';
import { ref } from 'vue';
import MarketplaceSection from '@/components/admin/setting/MarketplaceSection.vue';
import SocialMediaSection from '@/components/admin/setting/SocialMediaSection.vue';
import SystemSection from '@/components/admin/setting/SystemSection.vue';
import SettingLayout from '@/layouts/SettingLayout.vue';
import type {
    MarketplaceSettingsData,
    SettingSection,
    SocialMediaSettingsData,
    SystemSettingsData,
} from '@/types/setting';

defineProps<{
    system: SystemSettingsData;
    socialMedia: SocialMediaSettingsData;
    marketplace: MarketplaceSettingsData;
}>();

const activeSection = ref<SettingSection>('system');
</script>

<template>

    <Head title="Pengaturan" />

    <SettingLayout v-model:section="activeSection">
        <SystemSection v-if="activeSection === 'system'" :data="system" />
        <SocialMediaSection v-else-if="activeSection === 'social'" :data="socialMedia" />
        <MarketplaceSection v-else-if="activeSection === 'marketplace'" :data="marketplace" />
    </SettingLayout>
</template>
