import React, { useState, useEffect } from 'react';
import { LayoutDashboard, MapPin, Users, TrendingUp, DollarSign, Wallet, Box, Grid, Receipt, BarChart2 } from 'lucide-react';

const navItems = [
    { icon: LayoutDashboard, label: 'Dashboard', path: '/owner/dashboard' },
    { icon: MapPin, label: 'Branches', path: '/owner/branches' },
    { icon: Users, label: 'Staff', path: '/owner/staff' },
    { icon: TrendingUp, label: 'Investors', path: '/owner/investors' },
    { icon: DollarSign, label: 'Collections', path: '/owner/collections' }, // Changed label and added path
    { icon: Box, label: 'Inventory', path: '/owner/inventory' }, // Added path
    { icon: Grid, label: 'Masters', path: '/owner/masters' }, // Updated icon and label
    { icon: Wallet, label: 'Accounts', path: '/owner/accounts' }, // Moved and updated
    {icon: Receipt, label: 'Expenses', path: '/owner/expenses' }, // New item
    { icon: DollarSign, label: 'POS / Billing', path: '/owner/pos' }, // Added POS
    { icon: BarChart2, label: 'Reports', path: '/owner/reports' }, // Added path
];
 
const receptionistNavItems = [
    { icon: LayoutDashboard, label: 'Dashboard', path: '/receptionist/dashboard' },
    { icon: DollarSign, label: 'POS / Billing', path: '/receptionist/pos' },
    { icon: Wallet, label: 'Collections', path: '/receptionist/collections' },
    { icon: Receipt, label: 'Expenses', path: '/receptionist/expenses' },
    { icon: Box, label: 'Inventory', path: '/receptionist/inventory' },
    { icon: Users, label: 'Staff Info', path: '/receptionist/staff' },
    { icon: BarChart2, label: 'Reports', path: '/receptionist/reports' },
];

export default function SubHeader({ role: propRole }) {
    const currentPath = window.location.pathname;
    const role = propRole?.toLowerCase();
 
    if (!role) return null;

    const items = role === 'receptionist' ? receptionistNavItems : (role === 'owner' ? navItems : []);

    return (
        <div className="bg-white px-8 border-b border-gray-100 flex items-center gap-8 overflow-x-auto no-scrollbar">
            {items.map((item, index) => {
                const isActive = item.path && (currentPath === item.path || currentPath.startsWith(`${item.path}/`));
                return (
                    <button
                        key={index}
                        onClick={() => item.path && (window.location.href = item.path)}
                        className={`flex items-center gap-2 py-4 border-b-2 transition-all whitespace-nowrap ${
                            isActive
                                ? 'border-red-500 text-red-500 font-semibold'
                                : 'border-transparent text-gray-500 hover:text-gray-900 font-medium'
                        }`}
                    >
                    <item.icon size={18} />
                    <span className="text-sm">{item.label}</span>
                </button>
                );
            })}
        </div>
    );
}