function DrawerItem({ icon, title, desc, onClick, disabled }) {
  const Tag = disabled ? 'div' : 'button';
  return (
    <Tag
      style={{ ...appStyles.drawerItem, ...(disabled ? { opacity: 0.5, cursor: 'default' } : {}) }}
      onClick={disabled ? undefined : onClick}
    >
      <div style={appStyles.drawerItemIcon}>
        <i data-lucide={icon} style={{ width: 18, height: 18, color: disabled ? '#8E8B82' : '#1A1814' }}></i>
      </div>
      <div style={{ flex: 1, minWidth: 0, textAlign: 'left' }}>
        <div style={appStyles.drawerItemTitle}>{title}</div>
        <div style={appStyles.drawerItemDesc}>{desc}</div>
      </div>
      {!disabled && <i data-lucide="chevron-right" style={{ width: 16, height: 16, color: '#C9C4B6' }}></i>}
    </Tag>
  );
}