// Breadcrumb.jsx
import React from 'react';
import { Breadcrumb } from '@progress/kendo-react-layout';
import { useLocation } from 'react-router-dom';

const CampfireBreadcrumb = () => {
    const location = useLocation();

    const getBreadcrumbs = () => {
        const path = location.pathname;
        const pathSegments = path.split('/').filter(segment => segment);
        
        // Dashboard routes
        if (path === '/dashboard' || path === '/') {
            return [{ id: 'dashboard', text: 'Dashboard' }];
        }
        
        // Published posts filter
        if (path === '/posts') {
            return [
                { id: 'dashboard', text: 'Dashboard' },
                { id: 'posts', text: 'Published Posts' }
            ];
        }
        
        // Drafts filter
        if (path === '/drafts') {
            return [
                { id: 'dashboard', text: 'Dashboard' },
                { id: 'drafts', text: 'Drafts' }
            ];
        }
        
        // New post editor
        if (path === '/editor') {
            return [
                { id: 'editor', text: 'Editor' },
                { id: 'new-post', text: 'New Post' }
            ];
        }
        
        // Edit existing post
        if (path.startsWith('/editor/')) {
            const slug = pathSegments[1];
            return [
                { id: 'editor', text: 'Editor' },
                { id: 'edit-post', text: 'Edit Post' } // Placeholder for actual title
            ];
        }
        
        // Default fallback
        return [{ id: 'dashboard', text: 'Dashboard' }];
    };

    const breadcrumbData = getBreadcrumbs();
    console.log('Breadcrumb data:', breadcrumbData);
    
    return (
        <div style={{ 
            marginLeft: '120px', 
            color: '#d94f27',
            fontSize: '14px',
            lineHeight: '1.2',
            backgroundColor: 'transparent'
        }}>
            <style>
                {`
                    .k-breadcrumb {
                        background-color: transparent !important;
                    }
                    .k-breadcrumb .k-breadcrumb-item {
                        background-color: transparent !important;
                    }
                `}
            </style>
            <Breadcrumb data={breadcrumbData} />
        </div>
    );
};

export default CampfireBreadcrumb;