import React from 'react';
import { Link, usePage } from '@inertiajs/react';
import {
    LayoutGrid,
    Search,
    Users,
    MessageSquare,
    User,
    Bell
} from 'lucide-react';

export default function EmployerMobileLayout({ children, title }) {
    const { url } = usePage();

    const navItems = [
        { label: 'Home', icon: LayoutGrid, href: '/mobile/employer/home' },
        { label: 'Find Workers', icon: Search, href: '/mobile/employer/workers' },
        { label: 'Candidates', icon: Users, href: '/mobile/employer/candidates' },
        { label: 'Chat', icon: MessageSquare, href: '/mobile/employer/messages', badge: 3 },
        { label: 'Profile', icon: User, href: '/mobile/employer/profile' },
    ];

    const isActive = (href) => url.startsWith(href);

    return (
        <div className="min-h-screen bg-[#F8F9FA] font-sans text-[#141B34] flex flex-col max-w-md mx-auto relative">
            {/* Content Area */}
            <main className="flex-1 overflow-y-auto pb-24">
                {children}
            </main>

            {/* Bottom Navigation */}
            <div className="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-[#E5E7EB] px-2 py-2 flex items-center justify-between z-50 h-[70px]">
                {navItems.map((item) => {
                    const active = isActive(item.href);
                    return (
                        <Link
                            key={item.label}
                            href={item.href}
                            className={`flex flex-col items-center justify-center flex-1 space-y-1 transition-all relative ${active ? 'text-[#141B34]' : 'text-slate-400'
                                }`}
                        >
                            <div className="relative">
                                <item.icon className={`w-6 h-6 ${active ? 'fill-[#141B34]' : ''}`} />
                                {item.badge && (
                                    <div className="absolute -top-1.5 -right-1.5 min-w-[16px] h-4 bg-[#185FA5] text-white text-[8px] font-bold rounded-full flex items-center justify-center border border-white px-1">
                                        {item.badge}
                                    </div>
                                )}
                            </div>
                            <span className="text-[9px] font-bold tracking-tight">{item.label}</span>
                            {active && (
                                <div className="absolute bottom-[-8px] w-1.5 h-1.5 bg-[#141B34] rounded-full" />
                            )}
                        </Link>
                    );
                })}
            </div>
        </div>
    );
}