import React from 'react';
import { __ } from '@wordpress/i18n';

// components

const AppSidebar = () => {
    const items = [
        {
            label: __('Riepilogo', 'gepafin'),
            icon: 'pi pi-objects-column',
            clickFn: () => {},
            id: 1
        },
        {
            label: __('Gestione Bandi', 'gepafin'),
            icon: 'pi pi-file',
            clickFn: () => {},
            id: 2
        },
        {
            label: __('Gestione Utenti', 'gepafin'),
            icon: 'pi pi-users',
            clickFn: () => {},
            id: 3
        },
        {
            label: __('Configurazione', 'gepafin'),
            icon: 'pi pi-cog',
            clickFn: () => {},
            id: 4
        },
        {
            label: __('Report e Analisi', 'gepafin'),
            icon: 'pi pi-chart-bar',
            clickFn: () => {},
            id: 5
        },
        {
            label: __('Log di Sistema', 'gepafin'),
            icon: 'pi pi-receipt',
            clickFn: () => {},
            id: 6
        }
    ]

    return <sidebar>
        <ul>
            {items.map(o => <li key={o.id}>
                <a href="#" onClick={o.clickFn} className={o.id === 1 ? 'active' : ''}>
                    <i className={o.icon}></i>
                    <span>{o.label}</span>
                </a>
            </li>)}
        </ul>
    </sidebar>
}

export default AppSidebar;