<template>
    <div class="breadcrumb-header">
        <a-card class="page-content-sub-header breadcrumb-left-border">
            <a-row>
                <a-col :span="24">
                    <div class="header-row">
                        <div class="header-left">
                            <slot key="header" name="header"></slot>
                        </div>
                        <div v-if="showViewToggle" class="header-right">
                            <a-radio-group
                                v-model:value="currentView"
                                button-style="solid"
                                @change="onViewChange"
                            >
                                <a-radio-button value="card">
                                    <AppstoreOutlined />
                                </a-radio-button>
                                <a-radio-button value="list">
                                    <UnorderedListOutlined />
                                </a-radio-button>
                            </a-radio-group>
                        </div>
                        <slot name="extra"></slot>
                    </div>
                </a-col>
                <a-col :span="24">
                    <slot key="breadcrumb" name="breadcrumb"></slot>
                </a-col>
            </a-row>
        </a-card>
    </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { AppstoreOutlined, UnorderedListOutlined } from "@ant-design/icons-vue";

const props = defineProps({
    showViewToggle: {
        type: Boolean,
        default: false,
    },
    defaultView: {
        type: String,
        default: "card",
        validator: (value) => ["card", "list"].includes(value),
    },
});

const emit = defineEmits(["viewChange"]);

const currentView = ref(props.defaultView);

watch(
    () => props.defaultView,
    (newVal) => {
        currentView.value = newVal;
    }
);

const onViewChange = (e) => {
    emit("viewChange", e.target.value);
};
</script>

<style scoped>
.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.header-left {
    flex: 1;
}

.header-right {
    flex-shrink: 0;
}
</style>
