import React from 'react';
import { __ } from '@wordpress/i18n';
import { Home, MessageSquareText, Package, CircleHelp } from 'lucide-react';

const BottomNav = ({ activeView, onChange, showOrders = false }) => {
    const tabs = [
        { id: 'home', label: __( 'Home', 'aisk-ai-chat' ), Icon: Home },
        { id: 'messages', label: __( 'Messages', 'aisk-ai-chat' ), Icon: MessageSquareText },
        showOrders && { id: 'orders', label: __( 'Orders', 'aisk-ai-chat' ), Icon: Package },
        { id: 'help', label: __( 'Help', 'aisk-ai-chat' ), Icon: CircleHelp },
    ].filter(Boolean);

    return (
        <nav className="aisk-bottom-nav" aria-label={__( 'Chat navigation', 'aisk-ai-chat' )}>
            {tabs.map(({ id, label, Icon }) => (
                <button
                    key={id}
                    type="button"
                    className={`aisk-bottom-nav-item${activeView === id ? ' is-active' : ''}`}
                    onClick={() => onChange(id)}
                    aria-current={activeView === id ? 'page' : undefined}
                >
                    <Icon size={20} strokeWidth={activeView === id ? 2.4 : 1.8} />
                    <span>{label}</span>
                </button>
            ))}
        </nav>
    );
};

export default BottomNav;